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推荐 序 一 


在 互联 网 时 代 ， 设 计 需 要 适应 以 移动 互联 网 、 物 联网 和 云 计 算 为 特征 
的 信息 技术 环境 。 社 会 环境 的 主题 变 为 全 球 化 和 本 土 化 、 可 持续 发 展 与 低 
而 生活 、 企 业 与 个 人 社会 贡 任 。 在 这 样 的 环境 下 ， 孤 立 的 产品 设计 是 不 够 
的 ， 要 设计 系统 的 解决 方案 : 服务 模式 、 商 业 可 了 式 、 交 互 界 面 、 产 品 平 合 
等 。 设 计 还 要 考虑 到 跨 学 科 、 以 人 为 中 心 、 社 会 化 创新 、 全 球 化 视野 与 本 


十 化 行动 相 结合 。 
近年 来 ， 随 着 “移动 互联 ”和 “社交 网 络 ” 的 兴起 ， 后 互联 网 时 代 的 
连接 方式 正在 发 生 深 刻 的 变化 ， 特 别 是 对 信息 组 织 的 方式 转 为 以 人 的 行为 


为 中 心 。 例 如 ， 基 于 LBS 的 随时 随地 以 使 用 情境 为 背景 的 行为 与 SNS 服务 
的 广泛 应 用 祖 结 合 ， 使 移动 用 户 通过 各 关 兴 趣 形 成 强大 的 移动 社交 了 网络 。 
在 现实 生活 中 ， 移 动用 户 可 以 通过 徽 博 、 微 信 、 手 机 淘宝 等 移动 应 用 随时 
随地 上 自主 选择 各 类 服务 和 功能 。 以 移动 社交 网 络 为 基础 的 用 户 群 体 逐 新 抓 
有 主导 市 场 的 权利 ， 使 传统 意义 上 居于 优势 地 位 的 企业 转 为 弱势 的 一 方 。 
因此， 优秀 的 企业 需要 以 用 户 体 验 设 计 为 中 心 ， 与 用 户 共 同 创造 民 性 的 设 


计生 态 ， 从 而 成 为 用 户 网 络 中 重要 的 “ 结 点 "。 正 如 小 米 的 “软件 + 硬件 + 
互联 网 ”的 互联 网 设计 生态 系统 ， 其 互联 网 设计 思想 体现 在 : 快速 欠 代 、 
基于 大 数据 挖掘 的 设计 决策 、 病 毒 式 传播 、 关 注 小 而 清晰 的 价值 点 、 免 费 


策略 、 基 于 社交 网 络 的 用 户 参 与 设计 及 粉丝 经 济 。 小 米 公 司 三 大 核心 业务 
之 一 的 MIUI 充分 体现 了 上 述 理念 ， 吕 调用 户 的 重要 性 ， 相 信和 用户 的 直 
元 ， 因 此 其 成 了 国内 手机 用 户 界面 的 仪 仪 者 。 

基于 上 述 育 景 ,《 小 设计 大 思维 一 一 移动 应 用 界面 的 设计 方法 与 实 


践 》 一 书 以 移动 应 用 界面 ( 小 ) 为 设计 对 象 ， 剖 析 设 计 思 维 ( 大 ) 在 商业 
模式 、 设 计策 略 、 用 户 研 究 、 设 计 实 践 等 层面 的 运用 ， 系 统 前 述 了 移动 应 
用 界面 设计 的 理论 基础 、 方 法 工具 和 应 用 案例 ， 反 映 了 作者 在 移动 应 用 界 
面 设 计 领 域 多 年 的 研究 成 果 和 实践 经 验 ， 值 得 广大 互联 网 行业 从 业者 及 数 
字 媒 体 设计 专业 的 教师 和 学 生 研 读 ， 
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推送 序 三 


随 痢 移动 互联 扩 术 的 发 展 与 普及 ， 移 动 互 联网 应 用 在 近 几 年 得 到 了 迅 
狸 发 展 ， 各 类 应 用 层出不穷 ， 在 吃 、 穿 、 住 、 行 、 用 方面 深刻 影响 春 人 们 
的 日 剃 生活 ， 人 类 的 生活 方式 也 锐 烙 上 了 移动 、 便 捷 的 时 代 特 征 。2015 
年 两 会 ， 李 克 强 总 理 在 政府 工作 报告 中 首次 提出 了 “互联 网 +” 行 动 计 
划 ， 和 表明 由 移动 互联 网 、 云 计算 、 物 联网 、 大 数据 及 智能 网 构成 的 下 一 代 
互联 网 是 战略 性 新 兴 产 业 ， 是 天 系 国家 安全 稳定 的 战略 性 信息 基础 设施 ， 
同时 还 可 以 成 为 拉动 我 国 经 济 增长 的 重要 引擎。 

在 这 种 背景 下 ， 如 何 让 企业 的 产品 与 服务 在 移动 互联 时 代 发 挥 自己 的 
自然 优势 和 社会 优势 ， 确 定 目 己 的 市 场 竞争 能 力 ， 在 强手 如 林 的 移动 互联 
网 产业 中 立 于 不 败 之 地 是 广大 移动 互联 网 企业 发 展 的 方向 和 努力 的 目标 ， 
也 是 传统 企业 在 信息 时 代 战 略 升 级 转型 期 间 强 行 解决 的 问题 。 从 数字 媒体 
乞 术 专业 的 角度 来 看 ， 优 良 的 移动 应 用 界面 设计 能 从 交互 行为 、 视 觉 美 感 
等 多 维度 给 用 户 市 来 舒适 的 体验 ， 提 升 移动 应 用 信息 传播 的 效率 ， 增 加 用 
户 对 产品 与 服务 的 荞 度 。 这 将 有 助 于 企业 品牌 和 组 织 成 长 ， 强 化 其 移动 产 
及 与 服务 的 苋 争 力 。 因 此 ， 以 用 户 体 验 为 中 心 ， 针 对 移动 应 用 界面 开展 设 
计 ， 在 推动 “新 常态 ”下 企业 移动 产品 与 服务 的 体验 优化 ， 以 及 更深 层次 
的 产业 升级 方面 ， 具 有 很 大 的 潜能 。 

由 杨 焕 与 陈 星海 两 位 博士 悉心 编写 的 《小 设计 大 思维 一 一 移动 应 用 界 
面 的 设计 方法 与 实践 》 一 书 中 创新 性 地 从 商业 模式 、 设 计策 略 和 用 户 研究 
等 方 面 归纳 出 系统 的 界面 设计 理论 与 方法 ， 回 答 了 在 瞬 县 万 变 的 移动 互联 
时 代 如 何 融 合 多 学 科 的 知识 有 有效 解决 产品 与 服务 的 体验 问题 ， 将 为 广大 企 


业 在 移动 应 用 界面 设计 工作 与 实践 中 提供 有 益 的 方法 。 本 人 也 期 望 作者 在 
未 来 的 工作 中 ， 以 现 阶段 的 成 果 为 基础 ， 结 合 实践 勇于 开拓 ， 取 得 更 多 移 
动 互 联 时 代 有 益 于 用 户 体 验 设计 行业 发 展 的 研究 成 果 。 
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推 存 友 三 


由 移动 互联 网 、 云 计算 、 物 联网 、 大 数据 以 及 各 类 智能 化 网 络 构 成 的 
下 一 代 互 联 性 形态 已 经 全 面 突破 了 原 有 的 技术 性 范畴 ， 正 逐步 演化 为 先进 
商业 模式 与 现代 服务 业 体系 的 架构 基础 ， 对 国家 经 济 、 科 技 、 社 会 、 文 化 
等 领域 的 中 长 期 建设 发 挥 着 重要 的 作用 。 这 其 中 ， 移 动 互联 网 与 民用 市 场 
结合 得 最 早 ， 迄 今 为 止 也 最 为 紧密 ， 在 很 大 程度 上 已 成 为 消费 者 体验 下 一 
代 互联 网 平台 的 入 口 ， 也 相应 带动 了 各 类 移动 互联 网 应 用 ( App ) 产品 的 
蓬勃 兴起 。 这 些 多 样 化 的 移动 应 用 打破 了 物理 时 空 的 限制 ， 令 使 用 者 能 够 
随时 随地 获取 资讯 、 开 展 沟 通 并 体验 各 类 服务 ， 它 们 正 潜移默化 地 改变 着 
人 们 的 生活 。 

由 此 ， 如 何 能 够 在 移动 互联 网 环境 中 确立 前 端 优势 ， 塑 造 并 提升 差异 
化 竞争 能 力 ， 使 自身 更 深层 次 地 嵌入 时 代 发 展 的 脉络 ， 是 广大 互联 网 企业 
及 相关 机 构 十 分 关注 的 问题 ， 也 是 传统 企业 面向 移动 互联 网 时 代 进 行 转型 
升级 所 亟待 破解 的 问题 。 移 动 应 用 作为 企业 连接 消费 者 的 重要 纽带 ， 其 市 
场 开 拓 力 和 品牌 塑造 力 将 不 可 小 凯 。 就 用 户 而 言 ， 优 秀 的 移动 应 用 设计 将 
有 可 能 成 倍 提高 互联 网 的 使 用 效率 ， 提 升 网 络 操作 体验 ， 增 强 自身 在 相应 
服务 中 的 信任 感 和 忠实 度 ， 无 形 中 也 参与 了 企业 产品 与 品牌 的 共 建 。 在 移 
动 互联 网 时 代 ， 这 种 基于 用 户 共 建 的 成 长 模式 对 企业 而 言 是 至 关 重要 的 。 

杨 焕 和 陈 星海 两 位 博士 在 移动 应 用 界面 设计 领域 有 着 多 年 的 实践 经 
验 ， 他 们 在 本 书 中 通过 用 户 研究 、 行 业 解读 、 商 业 策划 等 视角 汲取 提炼 的 
设计 理念 与 设计 方法 ， 相 信 对 每 一 个 重视 自身 移动 互联 网 产品 与 品牌 开发 
的 企业 或 机 构 而 言 都 将 具有 可 贵 的 参考 借鉴 价值 。 


我 个 人 并 非 界面 设计 领域 的 内 行 ， 对 深层 次 的 互联 网 技术 更 是 一 知 
半 解 ， 在 阅读 、 学 习 本 书 的 过 程 中 得 到 了 很 多 有 益 的 启示 。 希 望 本 书 正 
式 出 版 之 后 ， 能 够 对 众多 有 志 于 在 互联 网 时 代 有 所 作为 的 企业 及 机 构 有 
所 帮助 。 


一 一 李 昂 博士 

国务 院 发 展 研 究 中 心 东 方 文化 与 城市 发 展 人 研究 所 
所 长 助理 兼 文化 发 展 研究 室 主任 

清华 大 学 设计 战略 与 原型 创新 领域 特聘 专家 


移动 互联 网 时 代 给 人 们 的 生活 和 工作 带 来 了 许多 机 会 和 挑战 ， 在 这 样 
一 个 虚拟 、 丰 富 、 智 能 、 全 球 化 的 平台 之 上 ， 世 界 趋 于 局 平 、 机 会 变 得 平 
等 。 正 如 《和 失控》 的 作者 凯 文 凯利 ( Kevin Kelly ) 所 言 :“ 历 史上 从 未 
有 过 这 样 开 放 的 平台 ， 超 低 的 门槛 ， 海 量 的 机 会 ， 极 高 的 收益 风险 比 "。 
他 认为 这 是 人 类 历史 上 开拓 进取 最 好 的 时 代 ， 最 酷 、 最 炫 的 东西 还 没有 发 
明 出 来 。 

欣欣 向 荣 的 移动 互联 网 生态 系统 拥有 一 个 完全 开放 的 边界 : 信息 飞速 
传播 ， 人 与 人 、 人 与 物 、 人 与 环境 之 间 的 沟通 变 得 更 加 个 性 化 、 智 能 化 。 
移动 互联 网 技术 及 其 应 用 的 发 展 重新 定义 了 物 的 连接 、 人 的 连接 、 商 业 与 
人 的 连接 ， 这 极 大 地 改善 了 人 们 的 生活 和 工作 方式 ， 降 低 了 信息 沟通 的 成 
本 ， 提 高 了 社会 生产 的 效率 ， 丰 富 了 社会 生活 的 内 容 ， 并 为 促进 智慧 家 庭 
到 智慧 城市 的 发 展 提供 了 黑 多 具有 开创 性 的 移动 应 用 与 服务 。 

对 于 设计 师 来 说 ， 移 动 互 联网 时 代 充 满 了 机 会 和 挑战 。 如 今 ， 在 硅谷 
的 互联 网 企业 中 ， 设 计 师 文化 正在 崛起 ， 用 户 体验 的 份量 正在 不 断 增加 。 
其 倡导 的 设计 思维 是 希望 将 设计 思维 的 理念 、 模 式 和 创新 的 精神 带 入 整个 
产品 与 服务 的 设计 过 程 中 。 将 设计 看 作 企业 的 DNA， 融 入 企业 组 织 的 文化 
和 管理 ， 并 指导 企业 从 商业 与 服务 模式 到 具体 产品 设计 的 各 个 方面 。 正 因 
为 如 此 ， 设 计 专 业 的 界限 也 正 变 得 越发 模糊 ， 设 计 师 除了 掌握 基本 的 设计 
技能 外 ， 还 需 了 解 更 多 市 场 、 管 理 和 技术 方面 的 知识 ， 这 样 才能 全 面 、 系 
统 地 设计 移动 应 用 界面 ， 并 与 研发 团队 形成 良好 的 互动 与 合作 。 

如 今 大 量 的 互联 网 及 移动 互联 网 企业 、 创 业 公 司 与 团队 纷纷 加 入 到 移 
动 应 用 的 开发 队伍 中 ， 移 动 应 用 的 海洋 早已 从 “ 蓝 色 ” 变 成 “红色 "。 这 
使 得 产品 同 质 化 现象 日 趋 严 重 。 如 何在 海量 的 移动 应 用 与 服务 的 竞争 中 脱 
突 而 出 ， 给 社会 和 用 户 带 来 更 好 的 体验 和 价值 ， 这 需要 设计 师 发 挥 智慧 和 
才干 赋予 产品 与 服务 独特 的 设计 附加 值 ， 最 终 形成 自身 强大 的 品牌 效益 。 


因此 ， 在 遵循 移动 应 用 设计 规 汉 的 前 提 下 ， 合 理 有 序 地 开展 其 设计 活 
动 并 形成 民 好 的 用 户 体 验 是 设计 师 的 重要 任务 。 

本 书 以 作者 的 博士 论文 为 研究 基础 ， 将 移动 应 用 及 其 界面 作为 研究 对 
象 ， 在 介绍 现 有 移动 应 用 设计 领域 相关 知识 、 扩 术 的 基础 上 ， 综 合 运 用 市 
场 学 、 认 知心 理学 、 设 计 亏 术 学 、 美 学 等 学 科 的 理论 ， 通 过 设计 实践 探索 
其 设计 方法 。BSUTIG 模型 是 本 书 的 研究 框架 ， 它 涵盖 了 商业 模式 ( B )、 
设计 策略 ( S )、 用 户 及 其 任务 模型 (UT )、 交 互 设 计 (IT) 与 视觉 设计 
(6) 5 项 内 容 ， 分 属于 设计 思考 与 设计 实践 网 大 部 分 。 

本 书 可 以 作为 从 事 移动 互 联网 行业 的 相关 人 士 的 参考 书 ， 也 可 以 作 
为 用 户 体 验 设计 的 教学 与 研究 用 书 。 硕 望 本 书 对 从 事 移 动 设计 与 设计 教 
育 行业 的 读者 以 及 广大 设计 专业 的 学 生 都 能 有 所 帮助 和 局 发 | 


杨 焕 陈 星海 
2015 年 2 月 于 京杭 大 运河 畔 
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1.1 | 从 果 面 互联 网 到 移动 互联 网 的 转 蕉 


互联 网 ( Internet ) 最 早起 源 于 ARPANET ( 1969 年 美国 国防 部 高 级 研 
究 计 划 署 DARPA ( Defence Advanced Research Projects Agency ) 的 前 
号 )。 该 网 络 的 出 现 标志 着 计 算 机 网 络 的 诞生 。 

20 世纪 90 和 年代， 人们 开始 通过 个 人 计算 机 ( PC ) 接触 互联 网 ， 而 浏 
让 画 是 人 们 通 同 网 络 的 大 门 ， 也 就 是 现在 俗称 的 “入 口 ”， 这 让 一 些 互联 
网 企业 发 现 了 浏览 器 的 价值 。1995 年 ， 网 景 (Netscape ) 浏览 器 的 出 现 标 
志 着 人 类 进入 了 互联 网 时 代 ， 而 同一 时 期 微软 ( Microsoft ) IE 浏览 器 逐 
渐 成 为 主流 ， 有 吸引 了 更 多 人 的 目 苑 。 

此 后 ， 有 具有 丰富 资讯 内 容 的 新 闻 门 户 网 站 很 快 在 网 民 中 拥有 了 较 高 的 
人 人 和气， 人们 可 以 通过 它 及 时 了 解 外 部 世界 的 发 展 与 动态 。 直 到 谷歌 
( 6oogle ) 的 模 空 出 世 ， 人 们 才 逐 渐 意 识 到 强大 的 搜索 引擎 推动 了 互联 网 
生活 方式 的 变革 。 人 们 在 浩瀚 的 信息 海洋 中 根本 不 需要 那么 多 选项 ， 便 可 
更 加 主动 地 参与 对 信息 的 选择 与 使 用 。 一 个 简单 的 搜索 框 、 几 个 索引 词 足 
以 轻松 满足 人 们 对 于 上 网 多 取信 息 的 需求 。 

从 2004 年 开始 ，Facebook、Twitter 等 一 系列 新 型 社交 类 互联 网 产品 
像 新 鲜 有 的 氧气 一 般 让 人 们 沉醉 其 中 。 此 后 ， 以 PC 和 互联 网 服务 为 特征 的 





已 


泉 面 互联 网 服务 功能 从 办 公 辅 助 工具 、 了 人 解 信 息 的 中 介 ， 延 伸 为 人 们 的 沟 
通 工 具 。 

2007 年 ， 苹 果 公 司 的 智能 手机 iPhone 改变 了 人 们 对 手机 的 认识 ， 手 
机 不 再 只 是 两 人 之 间 沟 通 的 工具 。iphone 手机 与 其 音乐 售卖 平台 
iTunes、 应 用 程序 售卖 平台 App Store 以 及 线 下 的 商店 有 机 地 结合 ， 形 成 
了 一 个 以 用 户 需 求 为 中 心 的 移动 互联 网 服务 生态 圈 。 由 于 iPhone 对 手机 
行业 的 重新 定义 ， 促 使 移动 互联 网 产业 开始 呈现 爆炸 式 增 长 的 态势 。 苹 果 
公司 以 软件 + 硬件 + 服务 三 位 一 体 的 商业 模式 的 成 功 ， 让 人 们 看 到 了 移动 
互联 网 创新 的 潜力 与 价值 ， 使 人 们 的 注意 力 从 棵 面 互 联网 逐渐 转向 移动 互 
联网 。 

2010 年 后 ， 互 联网 发 生 了 七 个 重大 变化 : 连接 ( Connect )、 开 放 
( 0pen )、 网 页 ( Web )、 移 动 ( Mobile )、 应 用 ( App )、 位 置 ( Location )、 


社交 ( Social )， 合 称 CONWNMALS。 ”就 在 同一 时 期 ， 美 国 风 险 投资 公司 凯 鹏 
华 盘 ( KPCB ) 合伙 人 约翰 : 杜 尔 ( John Doerr ) 提出 : 未 来 互联 网 环境 将 


是 “社交 + 本 地 化 + 移动 ”( So+Lo+Mo ) 的 结合 。 这 一 想法 被 业界 看 作 是 桌 
面 互 联网 ( Desktop Internet ) 向 移动 互联 网 ( Mobile Internet ) 发 展 的 
真实 写照 。 可 以 理解 为 移动 互联 网 不 仅 具 备 了 互联 网 的 基础 特征 ， 如 开放 
性 、 创 新 性 、 信 息 共 享 性 等 ， 还 具备 了 区 别 于 互联 网 的 本 质 特 征 : 便携 
性 、 身 份 可 识别 性 与 可 定位 性 。 

桌面 互联 网 与 移动 互联 网 最 大 的 差别 在 于 获取 信息 的 媒介 一 一 终端 设 
备 。 例 如 ，PC、 笔 记 本 电脑 虽然 可 以 移动 ， 但 与 手机 、 平 板 电 脑 等 移动 设 
备 相 比 ， 其 移动 性 较 弱 。 而 快 三 奏 的 现代 生活 要 求人 们 在 移动 中 具有 处 理 
事务 的 能 力 。 因 此 ， 当 一 项 服务 、 一 球 移 动 应 用 能 真正 满足 用 户 在 移动 中 
的 需求 时 ( 对 用 户 有 价值 )， 用 户 便 会 接受 它 ， 并 与 家 人 和 朋友 分 享 。 此 
外 ， 当 以 智能 手机 为 代表 的 移动 设备 普及 率 大 大 提高 之 后 ， 移 动 互联 网 的 
传播 性 也 比 桌 面 互联 网 更 加 快速 、 便 捷 和 广泛 。 目 前 ， 移 动 互联 网 2 以 及 
与 之 相关 的 硬件 和 软件 服务 在 庞大 的 互联 网 生态 环境 下 占据 了 较 大 的 市 场 





〇 移动 互联 网 是 移动 通信 和 互联 网 从 终端 、 技 术 到 业务 的 全 面 深 入 融合 。 它 并 不 是 指 一 种 网 
络 ， 而 是 指 一 种 利用 移动 接 入 技术 接 入 互联 网 络 的 方式 。 移 动 互 联网 用 户 能 依靠 手机 、 平 板 电脑 等 手 
持 移动 终端 通过 移动 通信 网 络 ( W-LAN、GPRS、6SM、CDMA、TD-SCDMA、WCDMA 等 ) 接 入 互联 网 。 
一 一 笔者 注 
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空间 。 

2013 年 后 ， 全 球 移动 互联 网 产业 发 展 越 来 越 快 ， 国 内 移动 互联 网 用 
尸 规模 达到 了 8 亿 ， 智 能 手机 等 移动 设备 的 出 人 负 量 也 逐 新 赶 超 虹 面 设 
备 ， 这 标志 看 移动 互联 网 成 为 了 互联 网 发 展 的 重要 方向 。 整 个 互联 网 环 
境 的 关键 词 是 “开放 ”与 “融合 "， 云 计算 、 大 数据 、 物 联网 已 经 成 为 
互联 网 领域 鸭 基础 技术 ， 尼 们 与 移动 互联 网 的 良好 整合 让 硬件 与 软件 、 
线 上 与 线 下 服务 体验 无 颖 对 接 ， 这 成 为 移动 互联 网 生态 中 最 有 有 吸引 刀 的 
服务 等 征 。 

互联 网 从 诞生 之 初 就 市 有 不 确定 性 与 探索 性 。 纵 观 整 个 互联 网 环 
境 ， 其 扩 术 仍 在 不 断 升 级 ， 产 品 也 越 来 越 丰富 ， 移 动 互 联网 产品 市 场 的 
苋 争 越 来 越 激烈 。 因 此 ， 企 业 和 设计 团队 为 了 应 对 市 场 苋 争 的 残酷 性 ， 
在 饶 发 产品 时 都 要 抓 住 核心 一 一 用 户 ， 围 绕 用 户 米 创造 更 好 的 移动 互联 
网 产品 与 服务 。 


1.2 | 用 尸 寄 面 的 友 展 历 程 


用 户 界 面 ( User Interface，UI) 又 名 人 机 界面 ， 在 广义 上 指 人 与 机 
器 间 存 在 相互 作用 的 媒介 ( Human 一 Machine Interaction，HMI )， 在 狭义 
上 指 人 与 计算 机 界面 ( Human-Computer Interface，HCI ) 的 关系 。 本 书 
中 提 到 的 界面 主要 指 人 与 虚拟 产品 交互 的 媒介 ， 一 个 典型 的 用 户 界 面 是 人 
通过 控制 将 信息 传递 给 软件 ， 软 件 绸 通过 后 合 处 理 显 示 信 息 传 递 给 人 。 

命令 行 界面 ( Command-Line Interface，CLI ) 是 最 早 的 计算 机 用 户 
界面 形式 ， 用 户主 要 通过 输入 命令 的 形式 来 完成 操作 。 其 主要 使 用 者 是 程 
序 员 等 专业 的 计算 机 从 业 人 员 。 

20 世纪 70 年 代 ， 当 图 形 用 户 夫 和 面 ( Graphical User Interface,， 
GUI ) 在 计算 机 界面 中 流行 之 后 ， 人 与 计算 机 界面 的 互动 从 文字 输入 转变 
为 图 形 选 择 。 计 算 机 界面 的 使 用 变 得 越 来 越 容 易 ， 使 用 人 群 也 变 得 越 来 越 
广泛 。 其 中 ， 所 见 即 所 得 ( What You See Is What You Get，WYSIWYG )、 
WIMP ( Windows、Icon、Menu、Pointing device )、 和 直接 操作 成 为 GUI 的 最 
大 特 后 。 

当 智 能 技术 被 融合 到 用 户 界 面 之 中 ， 智 能 用 户 界面 ( Intelligent 
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User Interface，IUI ) 应 运 而 生 。IUI 中 的 普 适 计算 、 注 意 力 界面 、 多 通 
道 用 户 界 面 、 触 觉 界 和 面 等 特征 使 用 户 界 面 变 得 更 加 立体 ， 多 种 感官 与 扩 术 
的 结合 使 用 户 体验 的 空间 被 拉 伸 了 。 

2007 年 ，iPhone 市 来 了 一 个 全 新 的 基于 直 羌 、 本 能 的 交互 学 陈 一 一 
自然 用 户 界 面 ( Nature User Interface，NUI )。 相 对 于 GUI 关注 的 是 用 户 
在 桌面 端 用 鼠标 驱动 下 的 视觉 效果 ，NUI 更 加 强调 操作 的 直观 和 简单 。 多 
氮 触 控 、 基 于 直 帝 设计 的 文 持 手 势 操 控 的 交互 界面 ， 使 视觉 、 触 竞 、 听 
觉 、 较 高 的 认 知 能 力 都 能 通过 设备 传递 给 用 户 。 

如 今 的 用 户 界 面 ， 呈 现 出 多 元 化 发 展 的 特点 ， 界 面 一 直 以 来 的 载 
体 一 一 固态 屏幕 ， 似 乎 显得 不 再 那么 重要 。 界 面 中 的 内 容 、 人 与 界面 的 
交往 、 人 与 环境 的 交往 、 人 的 行为 、 人 在 使 用 时 的 感受 才 是 界面 设计 需要 
考虑 的 中 心 议 题 。 基 于 这 种 态势 的 发 展 ， 计 算 机 专家 们 提出 了 有 机 化 用 户 
界面 ( 0rganic User Interface，0UI ) 的 概念 。 它 没有 固定 的 形态 ， 会 根 
据 用 户 情境 进行 流动 式 的 改变 ， 真 正体 现 出 功能 即 实现 、 动 作 即 结果 的 特 
尽 。 例 如 ， 语 基 亚 的 概念 可 穿戴 移动 智能 手机 Morph ( 见 图 1-1 ) ， 不 仅 
能 自由 转变 成 各 种 形状 ( 手机 样式 、 腕 表 样 式 ) ， 还 能 检测 空气 中 特定 的 
化 学 成 分 ， 上 自动 将 光 能 转换 为 电能 为 手机 电池 充电 。 





1-1 诺基亚 概念 手机 Morph 
( 图 片 来 源 : baike.baiducom ) 
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用 户 界 面 是 一 个 静态 的 词 ， 是 连接 系统 与 用 户 的 中 间 介 质 。 而 用 户 界 
面 设计 则 是 一 个 动态 的 词 ， 是 软件 开发 相关 人 员 开 展 界 面 设 计 工 作 任 务 的 
摘 述 。 随 痢 移 动 互 联网 的 快速 发 展 、 智 能 移动 终端 的 普及 ， 人 企业、 团队 其 
至 开发 者 个 人 都 纷纷 意识 到 用 户 界面 设计 的 重要 性 ， 因 此 以 用 户 为 中 心 的 
设计 ( User-Centered Design，UCD )、 用 户 体验 设计 ( User Experience 
Design ，UED )、 可 用 性 设计 ( Usability Design )、 设 计策 略 ( Design 
Strategy )、 商 业 模式 ( Business Model) 等 相关 设计 理念 被 纳入 到 移动 产 
品 与 服务 研发 的 内 容 中 来 。 用 户 界 面 设 计 不 再 像 过 去 仪 停留 在 给 软件 界面 
“上 色 ” 的 狭义 表现 层面 ， 而 是 发 展 到 能 为 软件 创造 用 户 价值 、 为 企业 带 
来 商业 价值 的 广义 战略 层面 。 它 包含 用 户 与 软件 界面 “交流 ”的 所 有 内 
容 ， 如 隐藏 在 界面 育 后 的 用 户 心 理 研 究 、 用 户 行为 设计 、 情 感化 设计 、 市 
场 学 人 研究， 甚至 还 可 以 包括 实现 软件 运行 的 程序 代码 编写 等 ， 所 有 这 些 涉 
及 的 设计 内 容 将 是 提升 移动 应 用 价值 的 关键 因素 。 


1.3 | 移动 应 用 的 分 类 及 友 展 


移动 应 用 ( Mobile Application，App ) 是 装载 在 智能 手机 等 移动 终端 
中 的 软件 程序 。 它 作为 移动 互联 网 的 内 容 载 体 ， 能 为 用 户 提供 各 种 便捷 的 
服务 。 它 改变 了 人 们 对 手机 等 移动 设备 只 能 完成 简单 通话 和 收发 短信 功能 
的 固有 观念 。 

(1 ) 移动 应 用 的 分 类 

1 ) 按 运 行 环境 分 类 ( 见 图 1-2 )。 

移动 网 页 应 用 ( Mobile Web Application )， 无 须 下载 和 安装 ， 一 般 通 
过 移动 浏览 器 运行 。 它 是 将 PC 端 网 页 进行 重新 解析 和 设计 后 适 配 于 移动 
设备 的 移动 网 页 ， 并 通过 移动 浏览 器 应 用 程序 打开 。 

移动 原生 应 用 ( Mobile Native Application )， 又 叫 客户 端 应 用 或 平 
合 应 用 ， 它 是 独立 的 软件 应 用 程序 ， 用 户 需要 通过 运营 商 的 门户 网 站 进行 
下 载 或 到 移动 应 用 商城 购买 ， 然 后 安装 移动 客户 靖 应 用 。 

比较 两 者 ，Native App 是 入 口 型 的 独立 应 用 形式 ， 支 持 离 线 操作 ， 其 
运行 速度 也 更 快 ; 而 Web App 作为 蹈 多 平台 和 终 妆 的 应 用 类 型 ， 其 开发 的 
成 本 更 低 ， 用 户 学 习 的 成 本 也 相对 较 低 。 
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2 ) 按 应 用 功能 分 类 。 

生产 力 辅助 应 用 ( Productivity Applications )， 生 产 力 辅助 应 用 主要 
用 来 帮助 用 户 提 高 操作 效率 ， 它 关注 具体 内 容 和 服务 。 和 社交 、 邮 件 、 电 子 
商务 、 移 动 网 上 银行 等 应 用 均 属于 生产 力 辅助 型 应 用 ( 见 图 1-3 )。 

实用 工具 应 用 ( Utility Applications )， 实 用 工具 应 用 主要 用 于 执行 
简单 且 需 要 较 少 输入 量 的 任务 。 天 气 预 报 、 指 南 针 、 有 录音 、 记 事 本 、1i09S 
计算 器 等 均 属 于 这 类 应 用 ( 见 图 1-4 )。 

沉浸 式 应 用 ( Immersive Applications )， 与 以 上 两 种 应 用 相 比 ， 沉 浸 
式 应 用 的 操作 更 为 简单 、 内 容 也 更 丰富 。 它 包 打 音乐、 游戏 等 多 种 媒体 形 
式 ( 见 图 1-5 )。 

(2 ) 移动 应 用 改变 了 人 们 的 生活 

随 着 移动 互联 网 规模 的 不 断 增长 ， 以 及 智能 手机 出 货 量 的 不 断 增加 ， 
促使 移动 生态 系统 中 不 断 衍 生出 更 多 的 新 应 用 ， 这 些 应 用 从 各 个 方面 帮助 
人 们 提高 工作 效率 ， 从 根本 上 影响 着 人 们 的 生活 方式 。 
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1-6， 平 果 应 用 商城 
( 图 片 来 源 : www.apple.com/cn/) 


( 3 ) 移动 服务 的 迅速 发 展 
移动 应 用 衍生 出 了 种 类 繁多 的 移动 服务 : 移动 社交 、 移 动 定位 服 
务 、 移 动 游戏 、 移 动 搜索 、 移 动 电子 了 商务、 移动 支付 、 移 动 电 视 、 移 动 
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广告 、 移 动 电子 阅读 等 ， 它 们 已 经 覆盖 了 人 们 生活 、 工 作 、 学 习 的 方 方 
面 面 。 在 国内 最 具 代 表 性 的 移动 互联 网 服务 中 ， 百 度 搜索 就 像 一 个 图 书 
馆 ， 帮 助 用 户 获 取 知 识 ， 解 决 用 户 的 各 种 疑问 ; 手机 淘宝 就 像 是 一 个 巨 
大 的 商城 ， 为 用 户 提 供 琳 琅 满 目的 商品 ， 使 用 户 足 不 出 户 就 能 购买 到 心 
仪 的 物品 ; 而 腾讯 徽 信 就 像 是 一 个 大 型 的 社交 场所 ， 使 用 户 之 间 能 以 短 
信 的 形式 互相 问候 。 

移动 应 用 设计 除了 立足 于 人 体验、 情感、 效率 等 设计 关键 点 外 ， 企 业 与 
设计 师 更 要 具备 一 种 服务 创新 的 意识 ， 力 图 通过 产品 为 用 户 创造 更 多 有 价 
值 的 服务 。 通 过 回顾 移动 互联 网 的 发 展 ， 可 以 发 现 移动 应 用 衍生 出 了 很 多 
对 用 户 生活 、 工 作 、 社 交 等 方面 产生 巨大 影响 的 服务 类 型 ， 如 基于 地 理 位 
置 的 服务 ( Location Based Service ，LBS )、 社 会 性 网 络 服务 ( Social 
Networking Services，SNS )、 用 户 原 创 内 容 ( User Generated Content， 
UGC )、 消 费 者 对 企业 ( Customer to Business，C2B )、 将 线 下 商务 机 会 与 
互联 网 结合 ( 0nline to 0ffline ，020 )、 移 动 互联 网 金融 ( Mobile 
Internet Financial )、 移 动 支付 ( Mobile Payment )、 公 众 平 台 等 ( 见 
1-7 )。 

空 付 (KungFu ) 是 支付 宝 推 出 的 全 新 支付 方式 ， 用 户 可 以 通过 扫描 任 
何 实物 来 实现 支付 ， 如 纹 届 、 宠 物 、 项 链 甚 至 婴儿 的 脸 ( 见 图 1-8 )。 目 
前 这 一 技术 还 在 研发 中 ， 并 没有 真正 面世 ， 但 空 付 所 表达 的 概念 代表 了 未 
来 移动 支付 的 趋势 和 方 喇 。 

( 4 ) 企业 越 来 越 重 视 用 户 需 求 与 体验 

移动 互联 网 生态 系统 进化 的 动力 不 仅仅 是 能 为 企业 或 公司 市 来 财富 ， 
更 多 的 是 能 为 用 户 创造 更 多 的 价值 。 纵 观 国 内 外 成 功 的 互联 网 产品 ， 这 些 
产品 一 定 是 满足 了 用 户 茶 个 方面 的 需求 ， 这 种 需求 可 能 是 基于 本 能 的 一 种 
显 性 或 隐形 需要 ， 也 可 能 是 因为 互联 网 扩 术 或 某 些 互联 网 产品 而 激发 出 的 
一 种 显 性 或 隐形 需求 。 与 此 同时 ， 用 户 的 需求 还 呈现 分 布 式 的 、 动 态 的 特 
点 ， 和 表现 为 不 同 用 户 群 体 需求 的 侧重 点 不 同 ， 以 及 随 着 用 户 对 产品 与 服务 
的 体验 疲 邦 ， 需 求 也 会 有 更 高 的 标准 。 

因此 想 要 做 好 一 个 移动 产品 ， 应 该 时 多 地 从 用 户 的 角度 出 发 ， 关 心 移 
动 应 用 本 身 的 特性 ， 追 求 恨 好 的 用 户 体 验 。 
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1]-7 移动 改变 人 们 的 生活 





空 付 ( KungFu ) 


1 一 8 
( 图 片 来 源 : www.youku.com ) 





(5 ) 移动 应 用 的 现状 与 问题 
广 ， 各 个 互联 网 企业 、 创 业 公 司 与 团队 甚至 部 分 传统 企业 都 纷纷 加 入 到 移 
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动 应 用 的 开发 队伍 中 。 移 动 应 用 数量 的 激增 ， 自 然 会 衍生 出 产品 同 质 化 以 
及 不 符合 移动 使 用 环境 等 问题 ， 具 体 表 现 如 下 : 

1 ) 如 何 使 自身 开发 的 应 用 赢得 蝎 多 的 市 场 扣 有 率 已 成 为 开发 者 玛 需 
思考 和 吏 竺 解决 的 重要 问题 。 

2 ) 在 移动 应 用 的 设计 领域 中 ， 普 人 遍 存 在 着 将 计算 机 站 的 经 验 照 搬 到 
移动 新 的 问题 。 然 而 移动 的 动态 性 、 不 确定 性 、 不 可 复制 性 却 一 直 在 提醒 
设计 师 们 ， 简 单 的 移植 必 将 导致 许多 问题 ， 产 重 影响 用 户 体验 。 

为 了 解决 上 述 问题 ， 设 计 师 需要 在 遵循 移动 应 用 设计 规 江 的 前 提 下 ， 
合理 地 、 有 和 针对 性 地 进行 移动 应 用 界面 设计 ， 以 保证 良好 的 用 户 体 验 。 


1.4 | BSUTIG 移动 应 用 罕 面 设计 万 法 


(1 ) 设计 文化 的 崛起 

如 今 在 国外 的 互联 网 企业 中 ， 设 计 师 文化 正在 崛起 ， 用 户 体验 的 份量 正 
在 不 断 增 加 。 例 如 ， 在 硅谷 大 型 或 小 型 的 创业 团队 中 ， 你 总 会 发 现 设计 师 的 
影 ， 奇 团队 中 没有 设计 师 ， 风 险 投 资 家 们 甚至 不 会 投 钱 。 硅 合 大 大 小 小 的 
活动 里 ， 已 经 有 不 少 活 动 不 谈 拉 术 、 不 谈 模 式 ， 只 谈 设 计 和 用 户 体验 。 

Airbnb ( 空中 食 宿 ) 是 由 美国 罗 德 岛 设 计 学 院 ( Rhode Island School] 
of Design，RISD ) 的 两 个 学 生 ( Joe Gebbia、Brian Chesky ) 创办 的 一 家 
旅行 房屋 租赁 公司 ( 见 图 1-9 )。 


Ey 愉 7 下 seeee 中 国 移动 全 EEN 15:22 了 100% 硬 且 4 


he | 稚 洋 忆 共 三 这 
at 。 








1-9 Airbnb 网 页 
( 图 片 来 源 : www.airbnb.conm ) 
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当 他 们 刚 开始 创办 这 家 公司 时 ， 并 没有 人 愿意 投资 他 们 的 公司 ， 因 为 
人 们 普遍 认为 设计 师 是 为 企业 干 活 的 人 ， 不 可 能 建立 和 运营 好 一 个 公司 。 
对 于 他 们 创办 公司 的 想法 ， 投 资 人 也 觉得 太 过 于 疯狂 ， 因 为 他 们 不 认为 有 
会 喜欢 住 在 别人 家 里 。 但 是 目前 Airbnb 的 估 值 已 经 超过 100 亿美 元 ， 
高 峰 时 段 会 有 20 多 万 人 活跃 在 Airbnb 平台 上 。 两 位 Airbnb 的 设计 师 兼 
创始 人 都 认为 ， 他 们 成 功 的 一 个 重要 原因 是 他 们 拥有 设计 背景 。 他 们 将 以 
“人 ”为 核心 的 价值 观 市 入 到 公司 中 ， 用 一 种 设计 文化 经 莒 、 管 理 公 司 ， 
他 们 认为 自己 会 走 得 更 远 。 

( 2 ) 设计 思维 的 渗透 

在 人 类 文明 不 断 进 步 、 科 技 高 速 发 展 的 时 代 ， 人 们 要 的 不 仅仅 是 技术 强 
大 、 拥 有 酷 炫 外 形 的 产品 ， 真 正解 决 用 户 问题 并 具有 创新 价值 的 优良 产品 才 
能 符合 这 个 时 代 的 特征 。 面 对 越 来 越 多 用 户 及 市 场 的 需求 、 商 业 的 挑战 、 创 
新 的 需要 、 科 技 与 体验 的 碰撞 ， 设 计 思 维 便 横 空 出 世 了 。 然 而 ， 设 计 思 维 是 
一 个 抽象 的 概念 ， 只 有 被 真正 运用 到 设计 中 ， 才 能 体现 其 价值 。 如 今 倡导 匠 
设计 思维 ， 是 希望 将 设计 思维 模式 、 理 念 、 创 新 的 精神 带 入 到 企业 的 文化 和 
价值 观 中 ， 将 设计 看 作 企业 的 DNA， 指 导 整 条 产品 线 的 研发 。 

世界 著名 的 设计 社区 公司 Behance ( 见 图 1-10 ) 根本 没有 产品 经 理 这 
样 的 职位 ， 设 计 师 或 者 拥有 用 户 体验 设计 背景 的 人 就 是 产品 经 理 ， 他 们 可 
以 在 公司 作出 重大 的 决策 。Behance 相信 设计 才 是 提高 公司 竞争 力 的 核心 
要 素 ， 设 计 不 只 是 包含 了 产品 ， 它 还 是 每 件 事 情 的 关键 因子 。 在 这 里 ， 设 
计 师 不 仅 要 负责 设计 创意 的 任务 ， 还 要 担当 好 一 个 组 织 者 、 管 理 者 的 角 
色 ， 上 监管 整个 产品 的 开发 过 程 。 只 有 这 样 ， 产 品 开发 的 每 一 个 阶段 才能 做 
到 有 序 链接 ， 结 果 也 会 更 加 符合 预期 。 

( 3 ) BSUTIG 移动 应 用 界面 设计 方法 介绍 

本 书 通过 设计 理论 的 分 析 与 设计 实践 的 探索 ， 总 结 出 移动 应 用 界面 设 
计 的 BSUTIG 设计 方法 ， 它 涵盖 了 商业 模式 ( B )、 设 计策 略 ( S )、 用 户 及 
任务 模型 ( UT )、 交 互 设计 (1) 与 视觉 设计 ( 6 ) 五 项 内 容 ， 分 属于 设计 
思考 与 设计 实践 两 大 部 分 ( 见 图 1-11 )。 

由 设计 思考 : 商业 模式 从 战略 层面 影响 移动 应 用 研发 及 其 界面 设计 
思路 ; 设计 策略 从 宏观 上 指导 移动 应 用 界面 设计 活动 ， 它 贯穿 于 整个 设计 
流程 ;用 户 是 使 用 者 ， 也 是 设计 活动 开展 的 根本 原因 ， 因 此 用 户 及 任务 模 
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具体 /输出 
BSUTIG 移动 应 用 界面 设计 系统 方法 结构 图 





@ 设计 实践 : 交互 设计 是 视觉 设计 背后 隐 性 的 设计 力量 ， 它 决定 用 
户 行为 、 操 作 、 人 情感、 体验 等 重要 指标 ;而 视 帝 设计 则 是 整套 系统 中 用 户 


唯一 能 直观 感受 的 层 面 ， 因 此 它 也 是 整个 系统 方法 的 最 终 沙 脚 总 
开放” “交叉 ”“ 融 合 ” 是 移动 互联 网 时 代 的 关键 词 ， 因 此 BSUTIG 移 


动 应 用 界面 设计 系统 方法 也 涵盖 了 市 场 学 、 计 算 机 科学 、 认 知心 理学 、 设 


计 艺术 学 等 多 门 学 科 的 知识 要 点 。 
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价值 与 创新 一 一 商业 模式 (B ) 


2.1 | 廊 计 思维 覃 陈 下 的 商业 模 陈 创新 体系 


2.1.1 设计 思维 与 商业 模式 创新 万 法 


设计 思维 本 质 上 是 以 人 为 中 心 的 创新 过 程 ， 它 强调 观察 、 协 作 、 快 速 
学 习 、 想 法 视 党 化 、 快 速 概 念 原型 化 ， 以 及 并 行商 业 分 析 ， 这 最 终 会 影响 
创新 和 商业 战略 。 设 计 思 维 的 目标 是 使 消费 者 、 设 计 师 和 商业 人 士 均 参与 
到 一 个 统一 的 流程 ， 这 个 流程 可 以 适用 于 产品 、 服 务 甚至 商业 体验 。 器 
顾 过 去 十 年 设计 管理 的 文献 ， 一 些 有 影响 力 的 作者 都 认为 设计 思维 不 仅仅 
是 产品 、 服 务 和 体验 发 展 的 重要 因素 ， 同 时 也 是 商业 、 组 织 和 管理 中 的 重 
要 组 成 部 分 。 设计 思维 作为 一 种 战略 创新 工具 ， 通 过 作用 于 企业 文化 及 
成 略 、 业 务 流程 等 各 个 层面 给 予 企业 可 持续 的 竞争 优势 。 

关于 商业 模式 的 定义 有 许多 种 ， 它 可 以 作为 一 种 染 构 ， 一 个 构 念 性 的 
工具 或 模型 ， 一 个 相互 依存 的 行为 体系 ， 一 个 结构 性 的 模板 或 方法 。 企 业 
商业 模式 的 总 体 目标 可 以 归纳 为 企业 在 一 个 不 断 变 化 和 不 可 预知 的 商业 环 
境 条 件 下 得 以 发 展 ， 通 过 企业 的 视角 和 特性 与 总 体 发 展 方向 以 产品 与 服务 
为 载体 ， 回 顾客 不 间断 地 交付 独特 或 优秀 的 价值 流 ， 同 时 给 予 页 献 者 ( 企 
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业 员 工 ) 优越 的 回报 ， 给 予 股 东 利 词 ， 给 予 企 业 管 理 层 成 就 感 ， 给 予 合作 
伙伴 以 公平 的 分 配 。 

商业 模式 创新 长 期 以 来 被 定义 为 仅仅 是 “ 近 术 驱动 ”的 方法 ， 表 现 为 
两 个 方面 : 人 通过 寻找 新 的 技术 解决 方案 以 发 明 新 产品 并 将 其 市 场 化 ; 
@ 提高 现 有 产品 的 性 能 和 可 用 性 。( Baglieri， 从 20 世纪 80 年 代 晚 期 开 
始 ， 随 着 全 面 质量 管理 理论 的 发 展 ( Deming，1986; 6algano，1990 )，” 
企业 开始 关注 客户 满意 度 ， 以 市 场 为 导向 (“市场 驱动 创新 ”的 方法 ) 通 
调 对 新 市 场 的 发 展 。 上 述 商 业 模 式 创 新 方法 大 多 是 从 营销 学 的 鱼 利 角度 和 
管理 学 的 价值 网 络 角度 展开 的 ， 这 些 方法 都 缺乏 系统 性 ， 在 当前 和 未 来 的 
商业 环境 中 已 不 能 完全 实现 企业 期 望 的 商业 结果 。 从 20 世纪 90 年 代 晚 期 
开始 ， 由 于 资产 的 短缺 ， 产 品 和 技术 周期 的 缩短 以 及 全 球 化 进程 的 发 展 ， 
设计 驱动 创新 的 方法 逐渐 成 长 起 来 ， 企 业 开 始 转 而 专注 消费 者 的 需求 。” 
企业 针对 消费 者 的 价值 创造 正 变 成 未 来 任何 企业 维持 竞争 优势 的 一 个 关键 
内 容 。 此 外 ， 设 计 驱 动 创新 可 以 与 技术 和 市 场 驱 动 的 创新 形成 互补 性 ， 设 
计 驱 动 创 新 既 可 以 介 过 满足 新 市 场 需求 得 到 发 挥 ， 也 可 以 通过 将 新 拷 术 整 
合 到 一 个 现 有 的 产品 中 得 以 体现 ”( 见 图 2-1 )。 


BD Sa Ga Ga Gn ED ED Es py” 


始 于 20 世 纪 90 年 代 晚 期 
设计 驱动 创新 专注 消费 
者 的 需求 


始 于 20 世纪 80 年 代 晚 期 


市 场 驱动 创新 全 面 质量 管理 关注 客户 开拓 新 
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1980 1990 2000 
图 2-1 商业 模式 创新 方法 趋势 分 析 


因此 ， 设 计 思 维 与 设计 驱动 商业 模式 创新 方法 都 哩 调用 户 ( 消费 者 ) 
的 因素 。 在 此 基础 上 ， 设计 师 如 何 更 好 地 理解 与 应 对 设计 与 陪 业 的 复杂 关 
系 ， 如 何 帮 助 企业 建立 设计 思维 驱动 下 的 商业 模式 创新 体系 将 成 为 企业 妃 
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求 创 新 与 可 持续 发 展 的 关键 。 
2.1.2 ”以 设计 思维 为 导 回 的 MIUI 商业 模式 分 析 


小 米 公 司 是 国内 著名 的 移动 互联 网 企业 ， 其 三 大 核心 业务 之 一 的 
MIUI 在 国内 竞争 日 益 激烈 的 手机 UI 市 场 独树一帜 。MIUI 的 商业 模式 在 设 
计 过 程 中 最 早 引 入 了 设计 思维 的 观念 ， 即 强调 用 户 的 重要 性 ， 相 信用 户 的 
直觉 。 在 其 组 织 生 态 系 统 内 部 MIUI 建立 了 强大 的 设计 文化 ， 提 出 决策 者 
和 开发 者 都 应 是 MIUI 深度 用 户 的 理念 ， 并 要 求 决 策 者 与 开发 者 具有 用 户 
体验 思维 ， 通 过 自身 的 体验 和 经 验 去 挖掘 用 户 潜在 的 需求 。 

关于 MIUI 商业 和 模式 内 容 的 分 析 ， 首 先 在 0sterwalders & Pigneurs 
( 2009 ) 的 商业 模式 画布 概念 和 Ankenbrands ( 2011 ) 的 商业 模式 蝴蝶 框架 
的 基础 上 ， 按 照 以 客户 为 中 心 的 设计 思维 方式 进行 语义 上 的 调整 ， 并 将 目 
标 客户 作为 起 点 ， 根 据 结构 形成 的 先后 顺序 设计 出 ( 包括 目标 客户 、 客 户 
需 水 、 关 键 业 务 、 客 户 接触 后 、 客 户 关 系 、 核 心 资 源 、 重 要 合作 、 成 本 结 
构 、 忽 收 结构 ) 倒 锥 形 的 商业 模式 结构 ( 见 图 2-2 )， 再 对 MIUI 商业 模式 
内 容 进行 分 析 。 其 中 ， 上 目标 客 户 为 创新 商业 模式 的 核心 要 素 ， 围 绕 目 标 客 
户 而 建 的 业务 系统 体现 了 创新 商业 模式 的 核心 基础 ， 服 务 业 务 系统 的 资产 
与 成 本 为 创新 商业 模式 的 必要 和 条件， 整个 系统 的 盈 收 结构 是 创新 商业 模式 
的 价值 体现 。 

( 1 ) 商业 模式 的 核心 要 素 一 一 目标 客户 

企业 需要 在 众多 客户 群体 的 基础 上 发 现 和 明确 目标 客户 ， 并 对 该 目标 
客户 群体 的 需求 进行 深入 分 析 和 理解 ， 以 挖掘 用 户 潜 在 的 、 未 被 满足 的 需 
求 : MIUI 在 成 立 之 初 就 将 手机 玩家 ( 发 烧 友 ) 和 希望 提升 自己 安 卓 手机 
ee 

) 商业 模式 的 核心 基础 一 一 围绕 目标 客户 而 建 的 业务 系统 
ee a ee ees 
客户 需求 ， 并 通过 算 选 和 排序 在 客户 需求 列表 中 确定 重要 的 客户 需求 ， 并 
由 此 得 出 关键 业务 。MIUI 明白 客户 最 根本 的 需求 是 提升 安 捍 手机 的 体 
ee 
式 ， 强 调用 户 体验 思维 的 运 
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2-2 以 客户 为 中 心 的 商业 模式 结构 


当 关 键 业 务 明 确 后 ， 商 业 模 式 设 计 参 与 者 需要 分 析 如 何 将 关键 业务 的 
价值 更 有 效 地 传递 给 目标 客户 ， 即 优化 客户 获取 产品 与 服务 的 渠道 。 无 论 
何 种 渠道 ， 企 业 都 离 不 开 与 客户 接触 ， 而 这 些 客户 接触 点 影响 大 客户 的 感 
知 ， 感 知 影响 着 购买 。 因 此 ，MIUI 在 第 一 版 本 发 布 的 同时 便 建立 论坛 ， 
让 客户 提出 需求 ， 并 要 求 MIUI 团队 员工 每 天 保证 至 少 15 分 钟 查阅 并 响应 
论坛 中 客户 的 意见 。MIUI 团队 通过 审视 客户 的 意见 ， 认 清 育 后 的 问题 ， 
帮助 客户 解决 问题 。 在 这 一 阶段 ，MIUI 的 客户 与 开发 团队 共同 运用 假设 
性 的 思考 方式 ， 对 各 种 功能 的 可 能 性 进行 大 胆 设想 ， 以 一 种 协同 创造 的 开 
发 方式 ， 让 这 些 高 端 客 户 从 第 一 天 就 来 影响 MIUI 的 设计 方向 。 人 例如， 用 
户 把 手机 借 给 他 人 使 用 时 ， 担 心 隐私 曝光 和 设置 弄 乱 。MIUI 对 此 提供 了 
访客 模式 ， 可 以 隐 泪 通话 记录 和 短信 ， 其 他 用 户 无 法 更 改 App 和 布局 ， 
有 些 用 户 需要 自 定 义 锁 屏 样式 ，MIUI 为 此 提供 了 百 变 的 锁 屏 方式 。MIUI 
还 通过 建立 境外 粉丝 站 ， 与 全 球 客户 建立 广泛 接触 总 ， 并 将 MIUI 国际 化 
为 23 种 语言 ， 在 文 持 219 个 官方 和 民间 机 型 的 泛 兼 容 性 条 件 下 为 全 球 客 
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户 提供 恨 好 的 体验 。 在 MIUI 的 基础 上 ， 小 米 公 司 搭建 了 自己 的 应 用 商 
店 、 主 题 商店 、 游 戏 中 心 、 视 频 中 心 和 云 服 务 ， 以 及 多 看 阅读 和 米 聊 这 些 
相对 独立 的 应 用 ， 从 而 构建 MIUI 的 商业 生态 圈 。 

另外 ， 商 业 模 式 中 的 客户 关系 定义 了 企业 和 客户 之 间 的 关系 形式 ， 企 
业 应 该 通过 不 断 完善 客户 关系 来 增加 与 维系 客户 。 小 米 公 司 在 国内 首创 用 
互联 网 模式 开发 手机 操作 系统 ， 喜 励 爱 好 者 参与 开发 改进 ， 这 不 仅 有 利于 
推动 产品 与 服务 的 改进 ， 也 让 企业 与 客户 之 间 形 成 良性 互动 的 合作 关系 。 
基于 上 述 内 容 ， 商 业 模 式 设 计 参 与 者 可 以 通过 可 视 化 的 原型 设计 围绕 目标 
客户 构建 商业 模式 的 业务 系统 。 

( 3 ) 商业 模式 的 必要 条 件 一 一 服务 业务 系统 的 资源 与 成 本 

在 这 个 过 程 中 ， 商 业 模 式 设 计 的 参与 者 需要 基于 企业 可 获得 的 资源 ， 
重新 审视 业务 系统 的 原型 设计 ， 从 可 行 性 的 角度 平衡 二 者 的 关系 。 要 达到 
这 个 目的 ， 需 要 企业 内 部 形成 以 设计 为 主导 的 组 织 生 态 系 统 ， 突 破 各 种 条 
件 约束 ， 经 过 多 次 迭代 设计 ， 形 成 可 持续 的 创新 商业 模式 。 小 米 公 司 强 调 
产品 的 用 户 体验 ， 认 为 用 户 需 求 是 创新 的 驱动 力 。 公 司 内 部 通过 整合 来 自 
微软 、 谷 歌 、 金 山 软件 、 摩 托 罗 拉 等 国内 外 著名 IT 公 司 的 资深 优秀 员工 ， 
基于 Andorid 深度 定制 手机 操作 系统 ， 采 用 每 周 五 升级 的 方式 ， 进 行 了 超 
过 200 项 的 改进 ， 受 到 全 世界 于 万 爱好 者 的 喜爱 和 推荐 。 此 外 ， 小 米 公司 
通过 支持 MIUI 爱好 者 开发 和 维护 第 三 方 ROM、 定 期 举办 MIUI 主题 设计 大 
赛 、 推 动 MIUI 主题 的 创新 来 积极 吸纳 外 部 的 智力 资产。 可 见 ，MIUI 商业 
模式 的 成 本 结构 包括 了 人 力 成 本 、 营 销 推 广 以 及 必要 的 固定 成 本 ( 见 
2-3 )。 

( 4 ) 商业 模式 的 价值 体现 一 一 整个 系统 的 盈 收 结构 

设计 思维 下 的 创新 商业 模式 在 向 客户 传递 了 满意 的 产品 与 服务 的 同 
时 ， 也 给 企业 及 所 有 的 利益 相关 者 带 来 了 收益 ， 这 也 是 创新 商业 模式 最 直 
观 的 价值 体现 。 整 个 系统 的 鱼 收 需要 扣除 商业 模式 运营 中 的 成 本 ， 它 也 是 
支撑 创新 商业 模式 良性 发 展 的 经 济 基础 。MIUI 和 盈 收 的 内 容 如 图 2-3 所 
示 。 针 对 这 些 忽 利 模式 ， 小 米 还 推出 了 自己 的 虚拟 货币 一 一 米 币 ， 用 户 可 
以 购买 米 币 ， 用 于 购买 主题 、 游 戏 充 值 等 。 无 论 哪 一 种 鱼 利 方式 ， 商 业 模 
式 设 计 参 与 者 都 需要 综合 考虑 个 人 或 者 商业 客户 对 产品 与 服务 价格 的 承受 
心理 ， 确 定 合 理 的 价格 才 可 能 带 来 可 持续 的 丰厚 利润 。 
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移动 应 用 界面 的 设计 亡 法 与 实践 


2-5 围绕 目标 客户 而 建 的 业务 系统 6-8 服务 业务 系统 的 资源 与 成 本 县 。9 整个 系统 的 盈 收 结构 


宁 ] 9. 县 收 结构 
四 


GD 现 有 一 小 米 主题 商店 为 客户 提供 个 性 化 的 付费 主题 设计 


C) 未 来 一 小 米 主题 商店 将 为 商家 设计 推广 类 的 主题 设计 





(3) 现 有 一 小 米 应 用 商店 向 应 用 提供 商 销售 一 定 比 例 的 广告 位 〈4) 未 来 一 小 米线 上 应 用 平台 发 展 到 一 定 阶段 将 向 应 用 提供 丙 收 取 相应 的 服务 费用 
人 G) 现 有 一 游戏 联运 业务 ， 向 用 户 提供 付费 的 在 线 游戏 


@ 6. 核心 资源 


(1) 整合 国内 外 著名 IT 
公司 的 资深 优秀 员工 
(2) 公司 内 部 强大 的 设 
计 文 化 

G) 高 效率 、 低 成 本 、 


(1) 提升 安 齐 手 机 体验 
(2) 满足 手机 爱好 者 ( 高 
级 用 户 ) 个 性 化 定制 的 
需求 


加 | 加 | e ek 7? 
口 日 3. 天 键 业务 


(1) MIUI 手 机 系统 互联 网 开发 模式 


的 建立 
(2) 用 户 体验 思维 的 运用 


人 总 1 目标 客户 


( 手机 玩家 


(2) Es= [= 


© 4. 客户 接触 点 


(9 建立 MIUI 官 网 与 论坛 
(2) 建立 境外 粉丝 站 

人 @) 支持 219 个 官方 和 民 

间 机 型 

(4) 基于 MIUI ,搭建 应 用 
商店 、 主 题 商 店 、 游 戏 

中 心 、 视 频 中 心 和 云 服 


x 7. 重要 合作 


( 支持 MIUI 爱 好 者 
开发 和 维护 第 三 方 
ROM 

(OEE ZE 
题 设计 大 赛 ， 推 动 


可 视 化 的 运营 OD MIUI 主 题 的 创新 


《2)” 5. 客户 关 系 ED dE 


( 转换 成 本 (2) 高 级 客户 参与 设计 (s) MIUI 操 作 系 统 每 周 更 
@) 设计 开发 团队 及 时 响应 客户 需求 新 提醒 
(4) 自助 服务 ， 在 线 下 载体 验 


(0 人力 成 本 (2) 营销 推广 6) 固定 成 本 





MIUI 商 业 模 式 内 容 分 析 


2-3 以 MIUI 为 例 的 商业 模式 内 容 分 析 


2.1.3 ”设计 思维 驱动 商业 模 陈 创新 体系 的 全 究 与 探索 

当前 商业 领域 的 专业 人 士 对 设计 在 企业 战略 层面 的 应 用 仍 存 在 着 困 
惑 ， 正 如 Trueman ( 1998 ) 提 到 的 “如 果 企 业 管理 者 对 设计 的 价值 不 清 
楚 ， 设 计 常 常 被 假设 为 成 功 创新 的 一 个 低 姿 态 工具 "。 “导致 的 结果 是 设 
计 有 限 的 适用 性 。 如 何 扭转 商业 人 士 对 设计 的 偏见 ， 在 企业 内 部 形成 设计 
思维 驱动 下 的 商业 模式 创新 体系 ? 通过 以 上 对 MIUI 商业 模式 的 解析 得 
出 : 首先 需要 一 个 拥有 浓厚 设计 文化 的 组 织 生态 系统 ， 再 通过 设计 思维 驱 
动 商业 模式 内 容 创 新 以 促进 商业 模式 的 可 持续 发 展 ( 见 图 2-4 )。 

( 1 ) 以 设计 文化 为 主导 的 组 织 生态 系统 

对 企业 组 织 的 设计 人 员 来 说 ， 填 平 商 业 模 式 创 新 过 程 中 企业 在 商业 管 
理 意识 和 设计 思维 应 用 之 间 的 鸿沟 是 非常 重要 的 。 要 解决 该 问题 ， 需 要 关 
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注 以 下 问题 : 由 组 织 的 管理 人 员 如 何 理解 设计 的 含义 ; @ 如 何 明 白 设计 
在 业务 流程 和 战略 中 应 用 的 必要 性 ;，(3) 如 何 确 定 设计 整合 于 组 织 内 部 ， 
给 消费 者 和 组 织 自身 带 来 优秀 价值 的 先决 条 件 。 这 三 个 问题 事实 上 是 一 
个 组 织 文 化 转型 的 实践 ， 也 意味 着 设计 人 员 需 要 挑战 组 织 固 有 的 文化 价值 
观 并 依据 设计 文化 重建 组 织 生 态 系 统 。 





hl 1 
1 设计 思维 下 的 商业 模式 创新 体系 ， 
| 
' 商业 模式 内 容 : 





2-4 ”设计 思维 下 的 商业 模式 创新 体系 


因此， 设计 和信 员 需要 理解 主导 组 织 的 系统 ， 通 过 换 位 思考 的 方式 寻找 
干预 的 方法 并 对 它们 进行 重新 设计 。 新 的 舱 入 式 设计 文化 在 组 织 内 部 的 建 
立 ， 可 以 使 企业 形成 以 设计 为 主导 的 组 织 生态 系统 ， 让 企业 在 经 营 过 程 中 
加 强 设 计 意 识 ， 并 以 此 为 基础 拥有 一 个 长 远 战略 的 商业 模式 和 行为 。 

(2 ) 设计 和 思维 驱动 商业 模式 内 容 创 新 

只 有 将 设计 思维 应 用 到 企业 战略 和 商业 模式 的 设计 过 程 中 ， 设 计 才 能 
体现 出 其 最 高 的 价值 。 因此 ， 以 设计 思维 的 逻辑 组 织 商 业 模 式 内 容 将 为 
设计 师 推 动 商业 模式 的 可 持续 性 创新 提供 重要 的 战略 工具 。 正 如 MIUI 商 
业 模 式 内 容 分 析 所 运用 的 以 客户 为 中 心 的 商业 模式 结构 分 析 法 ， 退 过 分 析 
客户 因素 在 商业 模式 4 个 层面 中 的 影响 来 明确 设计 作用 于 商业 模式 各 个 
层面 内 容 的 着 力 足 ， 从 而 将 设计 思维 贯穿 于 商业 模式 创新 的 整个 阶段 。 在 
这 个 过 程 中 ， 商 业 模 式 设 计 的 参与 者 需要 学 会 运用 同 理 心 、 假 设 性 思考 、 
原型 设计 等 设计 方法 ， 通 过 不 断 迭 代 突 破 商 业 约 束 ， 实 现 商 业 模 式 内 容 的 
可 持续 创新 。 





小 设计 大 思维 一 一 移动 应 用 界面 的 设计 方法 与 实践 


近 几 年 ， 设 计 轧 维 作 为 创新 的 一 种 战略 性 工具 得 到 了 迅速 的 发 展 。 
MIUI 商业 模式 的 成 功 与 设计 思维 下 的 快速 迭代 、 事 件 膏 形 、 粉 丝 经 济 、 
关注 用 户 小 而 易 用 的 痛 点 等 方式 有 有 关 。 这 让 人 们 意识 到 设计 对 于 商业 模式 
的 巨大 影响 力 ， 以 及 设计 强 有 力 的 岛 导 力 如 何 形成 和 实施 创新 驱动 战略 以 
实现 可 持续 性 的 鳃 利 能 力 。 


2.2 | 将 UCI 融入 移动 情境 感知 服务 商业 





模式 设计 的 万 法 


以 用 户 为 中 心 的 创新 ( UCI ) 既 强 调用 户 的 作用 ， 又 最 大 化 了 设计 的 
功用 。 它 是 创新 方法 领域 的 中 间 派 别 。 情 境 感知 服务 与 商业 模式 的 成 功 都 
离 不 开 对 用 户 因素 的 分 析 和 研究 ， 它 们 与 UCI 之 间 存 在 着 相似 的 思维 方 
式 ， 都 需要 通过 设计 方法 解决 问题 。 因 此 ， 对 UCI 融入 情境 感知 服务 商业 
模式 设计 的 方法 展开 探究 ， 将 为 情境 感知 服务 商业 模式 设计 方法 的 发 展 提 
供 强大 的 智力 支持 。 


2.2.1 UCI 的 含义 与 流程 


以 用 户 为 中 心 的 创新 ( UCI ) 避免 了 天 赋 设 计 观 ”( 成 功 者 如 苹果 的 
突破 性 创新 ) 对 用 户 作 用 基本 忽视 的 观点 ， 承 认 用 户 在 创新 的 过 程 中 的 作 
用 仍旧 不 可 小 鹿 。 同 时 ， 打 破 了 传统 的 UCD 方法 中 ， 研 究 与 设计 级 割 复 
成 两 个 先后 活动 的 线性 流程 ， 强 调用 户 研 究 与 设计 在 概念 生成 早期 应 协同 
人 参与、 反复 和 迭代。 因此 ， 它 要 求 设 计 开 发 团队 既 要 深入 用 户 的 内 心 、 洞 察 
用 户 的 需求 ， 又 要 运用 创造 性 的 思维 提出 尽 可 能 多 的 早期 设计 概念 并 与 用 
户 进 行 交流 ， 通 过 快速 原型 和 不 断 和 迭代 的 过 程 来 构建 完美 的 创新 概念 。 这 
一 过 程 就 像 交 互 环绕 的 DNA 双 螺 旋 结 构 ， 一 条 螺旋 是 设计 开发 团队 ， 吨 
一 条 螺旋 是 用 户 ， 它 既 强 调用 户 的 作用 ， 又 最 大 化 了 设计 的 功用 。 

M. Maguire 在 《支持 以 人 为 中 心 设计 的 方法 2》 一 书 中 提出 以 人 为 中 心 
设计 的 方法 包括 以 下 5 个 必要 的 步 又 ， 由 规划 以 人 为 中 心 的 设计 过 程 ， 
@ 理解 和 详细 说 明 使 用 的 情境 ，(3) 详细 说 明 用 户 和 组 织 需 求 ，(4) 产品 
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设计 和 原型 ，@) 实施 基于 用 户 的 评估 。” 因 此， 本 章 将 UCI 流程 概括 如 
Bs (D 情境 、 需求 分 析 + 设 计 ( 对 可 全 EE 的 终端 用 户 开 展 不 同类 型 的 人 研究 ， 
同时 提出 尽 可 能 多 的 早期 设计 概念 )， QB 评估 + 整合 ( 将 这 些 研 究 成 果 与 
用 户 反 馈 有 效 地 整合 于 设计 方案 )。 这 两 步 UCI 流程 秉承 的 理念 即 对 用 户 研 
究 的 前 期 投资 将 给 用 户 带 来 一 个 快速 和 容易 满足 他 们 需求 的 产品 。 UCI 
流程 图 如 图 二 所 示 。 


快速 达 代 1 快速 友 代 2 快速 欠 代 3 
”| 

















情境 分 析 


快速 原型 | 
需求 分 析 


设计 


设计 开发 团队 











步 又] 步 又 2 


2-5 ”UCI 流程 图 


2.2.2 移动 情境 感知 服务 的 内 容 


不 断 发 展 的 移动 通信 扩 术 和 其 他 拉 术 系统 通过 搜集 来 自传 感 器 、 系 统 
和 移动 设备 的 信息 来 确定 用 户 或 物体 的 情境 。 这 些 信 息 能 够 被 用 来 自动 适 
应 服务 的 行为 ， 从 而 导致 所 谓 的 移动 情境 感知 服务 。 

移动 情境 感知 服务 的 一 个 重要 类 型 是 基于 地 理 位 置 的 服务 ， 它 包 括 应 
急 服 务 ( 如 汽车 援助 )、 导 航 服务 ( 如 个 人 导航 )、 信 息 服 务 ( 如 移动 黄 
页 )、 营 销 服务 ( 如 移动 广告 )、 追 踪 服 务 ( 如 车 辆 追踪 ) 甚至 是 账单 结算 
服务 ( 地 理 位 置 感应 账单 )。 其 他 移动 晤 过 ed 
信息 ， 如 类 似 即 时 通信 此 外 ， 情 境 相 关 的 信息 同样 
能 够 来 自 类 似 感 应 颖 的 御 pe 如 被 用 来 测量 心率 的 生物 传感器 。 

虽然 技术 的 发 展 给 移动 情境 感知 服务 市 来 了 无 限 的 发 展 潜力 ， 但 在 市 
场 中 成 功 的 移动 情境 感知 服务 的 数量 依然 较 少 。 一 般 而 言 ， 创 新 扩 术 的 采 
用 很 大 程度 取决 于 潜在 商业 模式 的 可 行 性 ， 成 功 的 创新 技术 所 要 求 的 商业 
模式 就 像 技 术 创 新 一 样 重要 。 
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2.2.3 UCI 与 移动 情境 感知 服务 的 融合 


(1 ) UCI 与 移动 情境 感知 服务 的 共性 

UCI 与 移动 情境 感知 服务 是 截然 不 同 的 两 种 定义 ， 前 者 是 一 种 创新 
方法 ， 后 者 是 一 种 服务 类 型 ， 但 二 者 在 指导 思想 和 研究 内 容 方 面 存 在 着 
相似 性 。 

由 指导 思想 : 二 者 都 强调 以 用 户 为 中 心 。UCI ( 以 用 户 为 中 心 的 创 
新 ) 可 以 理解 为 在 创新 过 程 中 始终 保持 对 用 户 需求 与 反 蚀 的 关注 ， 而 情境 
感知 服务 在 运行 过 程 中 需要 使 用 情境 相关 信息 。Hristova and 0’Hare 
( 2004 ) 指出 情境 相关 信息 是 由 一 个 用 户 原 型 及 其 参数 设置 、 用 户 当 前 位 
置 、 用 户 与 移动 网 络 的 连接 形式 、 用 户 无 线 设备 的 类 型 、 当 前 目标 与 用 户 
的 距离 或 者 用 户 行 为 历史 的 信息 组 织 而 成 的 。“ 因 此 ， 支 撑 情 境 感 知 服 
务实 施 所 需 的 情境 相关 信息 都 是 围绕 用 户 而 搜集 的 。 

( 研究 内 容 二 者 都 包含 对 情境 的 分 析 。 关 于 情境 感知 服务 的 研究 
具体 集中 在 移动 服务 体系 架构 、 人 情境 建 模 、 人 情境 管理 、 情 境 推 理 以 及 构建 
引用 的 应 用 程序 。 而 UCI 的 流程 在 第 一 步 就 要 求 参 与 者 对 产品 或 服务 使 用 
的 情境 进行 详细 分 析 ， 梳 理 用 户 的 使 用 习惯 ， 发 现 用 户 的 潜在 需求 。 

(2 ) UCI 与 商业 模式 的 用 户 因素 联系 

商业 模式 近 几 年 一 个 很 流行 的 观点 是 0sterwalders & Pigneurs 
( 2009 ) 提出 的 一 个 由 9 个 模块 构成 的 商业 模式 国 布 概念 。 在 这 个 商业 国 布 
中 ， 价 值 主张 是 整个 商业 模式 的 核心 内 容 ， 价 值 主 张 解 决 了 客户 的 问题 或 
者 满足 了 客户 的 需求 。 每 个 价值 主张 都 包含 产品 与 服务 ， 以 满足 特定 客户 
细 分 群体 的 需求 。 因此， 价值 主 张 是 围绕 客户 ( 用 户 ) 而 构建 的 ， 客 户 
( 用 户 ) 因素 应 是 商业 模式 关注 的 基本 元 素 ， 这 与 UCI 具有 的 以 用 户 为 中 心 
的 属性 是 非常 相似 的 。 所 以 ， 在 UCI 与 商业 模式 中 ， 用 户 因 素 扮演 着 极其 
重要 的 角色 ， 深 刻 影响 着 UCI 方法 有 效 的 运用 和 商业 模式 的 成 功 ， 这 也 为 
UCI 方 法 应 用 于 商业 模式 设计 中 寻找 到 了 共同 的 契合 挟 ( 见 图 2-6 )。 

( 3) 基于 UCI 的 情境 感知 服务 商业 模式 分 析 ( 以 微 信 为 例 ) 

Mark de Reuver & Timber Haaker ( 2009 ) 通过 探索 商业 模式 组 件 来 
描述 商业 模式 ， 提 出 情境 感知 服务 商业 模式 由 服务 、 技 术 、 组 织 结构 、 财 
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务 这 四 块 组 件 构成 。 ”根据 UCI 的 流程 ， 基 于 组 件 式 的 商业 模式 内 容 结 
构 ， 本 小 二 对 微 信 商业 模 陈 展开 分 析 ( 见 图 2-7 )。 








以 用 户 为 中 心 的 属性 “| 用 户 需求 
围绕 用 户 搜集 | 情境 与 用 户 需 求 分 析 | 产品 与 服 
情境 相关 信息 ee 


情境 感知 服务 Ci) UCI (以 用 户 为 中 心 的 创新 ) 


图 2-6 UCI 与 情景 感知 服务 、 商 业 模 式 的 共性 分 析 


(D 微 信服 务 组 件 。 

微 信 的 用 户 和 群体 为 拥有 条 能 终 妆 的 大 众 消 费 者 。 微 信 每 一 个 重大 版 本 
的 更 新 ， 都 准确 地 把 握 住 了 用 户 的 需求 点 ， 这 要 求 产品 团队 对 当前 用 户 使 
用 情境 有 敏锐 而 又 准确 的 把 握 和 感知 。”“ 例 如， 为 了 使 用 户 在 更 多 场景 下 
都 能 较 好 地 使 用 语 首 功 能 ， 秘 信和 团队 对 产品 做 了 许多 改进 。 当 距离 感应 屁 
无 感应 ， 语 首 对 讲 会 默认 为 扬声器 播放 ;， 只 要 把 手机 贿 近 耳 灯 ， 马 上 就 改 
为 听信 模式 ， 方便 用 户 在 开会 或 不 方 便 扬 声 的 时 修 接 听 。 而 役 信 播 一 播 加 
好 友 的 功能 ， 其 核心 要 点 是 通过 最 简单 自然 的 动作 ， 达 到 一 个 可 以 和 别人 
连接 的 目的 。 另 外 ， 微 信 通 过 整合 与 管理 公众 账号 ， 将 微 信 公 众 平 合 打造 
成 一 个 与 用 户 进行 良好 沟通 的 渠道 ， 而 非 一 个 粗暴 的 营销 通道 ， 从 服务 的 
角度 要 求 微 信 公众 写 的 运 膏 者 充分 尊重 和 理解 用 户 ， 避 免 对 用 户 进行 信息 

表 炸 。 通 过 这 些 措 施 ， 用 户 对 做 信 产生 信任 ， 并 与 公众 半 台 之 间 建 立 恨 好 
的 互动 天 系 。 因 此， 可 以 将 微 信 有 的 价值 创造 元 素 归结 为 : 强调 最 自然 的 体 
验 ， 创 霹 一 种 用 户 喜 欢 的 新 的 生活 方式 。 

@ 微 信 技 术 组 件 。 

为 了 预防 和 缓解 需求 快速 变动 而 引起 的 反复 修改 ， 微 信 团 队 在 基本 技 
术 架 构 中 确立 了 “大 系统 小 做 "“ 计 一 切 可 扩展 “必须 有 基础 组 件 ” 等 敏 
捷 开 发 原则 。 这 样 的 技术 殿 构 能 保证 技术 团队 为 适应 快速 开发 提供 基本 能 
力 。 例 如 ， 微 信 朋 友 圈 这 个 产品 昌 然 经 历 了 多 个 版 本 的 迭代 ， 但 是 其 数据 
模型 是 不 变 的 。 所 以 ， 在 产品 设计 和 细 贡 还 没 出 来 的 时 候 ， 微 信 从 后 合 到 
协议 设计 ， 骨 到 本 地 存储 的 整 ee 做 好 了。 < 等 设计 最 终 
确定 的 时 候 ， 和 向 信 扩 术 属 面 已 经 进入 准备 阶段 ， 这 充分 体现 了 微 信 整合 服 
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微 信 服务 组 件 


1. 感知 使 用 情境 ， 把 所 用 户 需 求 
2. 与 用 户 建 立 良好 的 信任 关系 

3. 强调 最 自然 的 体验 ， 创 造 一 种 用 
户 喜 欢 的 新 的 生活 方式 
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微 信 组 织 结构 组 件 


1. 强调 开放 性 
2. 平台 化 战略 
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2-7， 微 信 商业 模式 内 容 分 析 
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1. 推动 社交 增值 服务 

2. 植 入 移动 社交 游戏 

3. 打造 生活 服务 平台 
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务 技术 、 标 准 化 服务 进程 所 市 来 的 敏捷 开发 优势 。 男 外 ， 微 信和 朋友 圈 可 以 
让 用 户 自己 设 定 对 好 友 的 分 享 权 限 。 答 信也 可 以 让 用 户 自己 选择 所 需 的 插 
件 ， 自 行 禁 用 自己 不 需要 的 插件 。 这 些 举 措 让 短信 用户 获得 了 更 多 的 自 定 
义 权 限 ， 增 加 了 用 户 对 产品 的 莫 性 。 

3) 微 信 组 织 结构 组 件 。 

答 信和 具有 很 强 的 开放 性 ， 为 开发 者 提供 了 专门 的 徽 信 开放 平 合 。 通 过 
短信 开放 平台 ， 微 信 与 广大 开发 者 共享 自己 的 数 亿 用 户 群 ， 进 而 推广 自己 
的 应 用 和 服务 ; 通过 整合 第 三 方 应 用 ， 役 信 自 身 成 为 了 一 个 真正 的 平 合 ， 
而 不 仅仅 局 限于 一 个 应 用 。 这 杆 ， 敏 信 可 以 把 主要 精力 集中 于 自己 的 核心 
功能 ， 从 自身 现 有 资产 和 经 验 优势 出 发 ， 人 整合 现 有 各 家 企业 、 商 户 的 服 
务 ， 形 成 生活 服务 的 入 口 和 六 人 台 ， 各 商家 只 需 维护 好 各 上 自在 微 信 上 的 账户 
邑 可 。 例 如 ， 招 商 银 行 最 早 推 出 了 信用 卡 中 心 官方 客服 微 信 账号 ， 将 其 内 
部 系统 开放 出 一 部 分 同 短信 和 直接 打 角 。 用 户 只 需 把 这 一 获得 微 信和 官方 认证 
的 账号 加 为 自己 的 微 信 好 友 ， 把 自己 的 卡号 或 者 身份 证 号 码 同 自己 的 微 信 
号 绑 定 ， 便 可 以 进行 一 些 简 单 的 操作 ( 如 查询 余额 及 账单 等 )。 

4) 微 信 财 务 组 件 。 

微 信 在 其 鳃 利 模式 上 ， 一 方面 推动 社交 增值 服务 ， 如 基于 微 信 即时 通信 
服务 的 本 质 ， 为 用 户 增加 付费 的 个 性 化 聊天 表情 ; 另 一 方面 开始 植 入 移动 社 
交游 戏 ， 让 玩家 在 游戏 平 合 中 与 好 友 共 同 游戏 ， 并 通过 购买 游戏 道具 来 赢得 
头像 、 等 级 以 满足 其 成 就 感 。 此 外 ， 微 信 游 戏 功 能 的 开放 为 手 游 开发 者 控 建 
了 平 合 ， 未 来 游戏 收益 分 成 将 成 为 徽 信 鱼 利 的 一 大 途径 。 在 生 洒 服务 平 合 方 
面 ， 微 信 的 职责 是 实现 傣 需 对 接 ， 满 足 线 上 用 户 的 丝 下 需求 ， 把 线 上 用 户 与 
比 下 商户 打通 ， 通 过 微 文 付 功能 形成 内 环 陈 的 020 商业 生态 系统 。 


2.2.4 基于 UCI 的 移动 情境 感知 服务 商业 模式 设计 方法 


根据 以 上 分 析 ， 本 章 以 服务 情境 分 析 和 用户 需 求 挖掘 为 切入 点 ， 对 移 
动情 境 感知 服务 商业 模式 设计 方法 展开 探索 ( 见 图 2-8 )。 

(1 ) 服务 组 件 

可 以 运用 情境 调 伍 方法 ， 在 情境 感知 服务 的 场景 中 观察 用 户 并 与 其 交 
流 ， 发 现 他 们 行为 的 所 有 重要 细节 ，” 归纳 用 户 的 需求 以 及 用 户 之 间 可 能 
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的 信任 危机 。 并 以 此 为 基础 ， 明 确 价值 创造 的 元 素 ， 分 析 信 任 危机 可 能 上 各 
解 次 方案 。 


有 @ UCI 方 法 的 运用 a 解决 的 问题 
归纳 用 户 需求 

服务 组 件 “| 情境 调查 方法 一 一 明确 价值 创造 元 素 
解决 信任 危机 


整合 服务 技术 
标准 化 服务 进程 
技术 组 件 
可 用 性 测试 ee 评估 技术 整合 后 的 易 用 性 
用 户 管理 并 定义 自己 的 隐私 级 别 评估 隐私 管理 的 有 效 性 





保证 价值 网 络 的 开放 性 
组 织 结构 组 件 | 掌握 以 用 户 为 中 心 的 思维 方式 ”~ 优化 目 身 在 价值 体系 中 的 角色 


与 其 他 参与 者 合作 共 遍 





满足 用 户 个 性 化 、 多 元 化 的 需求 
财务 组 件 和 
用 户 参与 式 的 设计 方法 


2-8 ”基于 UCI 的 情境 感知 服务 商业 模式 设计 方法 


( 2 ) 技术 组 件 

整合 所 有 这 些 服务 技术 ， 标 准 化 服务 进程 ， 从 而 适应 敏捷 开发 的 工作 
效率 ， 让 用 户 管理 并 定义 自己 的 隐私 级 别 。 在 技术 内 容 完成 后 ， 通 过 可 用 
性 测试 的 方法 让 用 户 在 特定 场景 下 使 用 服务 ， 对 用 户 的 操作 过 程 、 操 作 难 
易 程度 、 隐 私 共享 规则 的 接受 程度 进行 观察 、 记 录 和 测量 ， 以 此 来 评估 技 
术 整 合 后 的 易 用 性 ， 以 及 隐私 管理 对 情境 感知 服务 的 影响 程度 。 
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(3 ) 组 织 结构 组 件 

强调 情境 感知 服务 价值 网 络 的 开放 性 ， 要 求 价 值 网 络 中 的 企业 需要 车 
握 以 用 户 为 中 心 的 思维 方式 ， 加 快 服务 创新 并 与 其 他 参与 者 合作 共 赢 ， 不 
新 优化 自身 在 情景 感知 服务 价值 体系 中 的 角色 。 

( 4) 财务 组 件 

为 了 让 用 户 更 好 地 接受 情境 感知 服务 ， 服 务 提供 商 除 了 满足 用 户 个 性 
化 、 多 元 化 的 需求 外 ， 还 可 以 采用 用 户 人 参与 式 的 设计 方法 ， 人 邀请 需求 强烈 
的 用 户 参 与 到 服务 的 设计 过 程 ， 从 服务 功能 和 体验 上 更 加 尊重 用 户 的 意 
见 ， 创 造 出 消费 者 愿意 付费 的 服务 。 


2.3 | 小 结 


以 设计 为 导向 的 商业 模式 创新 方法 通过 设计 思维 作为 切入 点 ， 总 结 归 
纳 出 了 创新 的 商业 模式 ， 首 先 需要 以 设计 为 主导 的 组 织 生态 系统 ， 在 组 织 
内 部 营造 出 具有 创新 意识 的 设计 文化 ， 再 围绕 目标 客户 因素 构建 商业 模式 
内 容 ， 整 合 企业 可 获得 的 资源 ， 以 开放 、 人 合作 、 宽 容 、 进 取 的 心态 ， 运 用 
原型 设计 工具 ， 在 商业 模式 快速 迭代 的 过 程 中 突破 约束 ， 实 现 商 业 模式 的 
可 持续 发 展 。 这 在 一 定 程 度 上 ， 为 设计 师 参 与 到 企业 战略 与 商业 模式 的 制 
定 提 供 了 清晰 和 有 力 的 工具 ， 也 为 企业 决策 者 实施 以 设计 为 导向 的 商业 模 
式 提供 了 系统 的 理论 依据 。 更 重要 的 是 ， 以 设计 为 导向 的 商业 模式 的 实施 
将 为 移动 应 用 设计 策略 的 制定 、 交 互 与 视觉 设计 工作 的 开展 营造 良好 的 设 
计 环 境 并 给 予 战略 层面 的 指导 。 

在 移动 情境 感知 服务 商业 模式 设计 中 融入 UCI 的 理念 与 方法 ， 符 合 
移动 情境 感知 服务 以 用 户 情 境 信息 为 中 心 开 展 的 特点 ， 也 与 商业 模式 所 
强调 的 核心 因素 ( 用 户 ) 相 契 合 。 它 将 促进 移动 情景 感知 服务 应 用 在 设 
计策 略 、 界 面 交互 与 视觉 设计 等 方面 围绕 用 户 及 任务 模型 有 效 地 解决 各 
自 的 问题 。 

随 着 以 移动 互联 和 社交 网 络 为 特征 的 后 互联 网 时 代 的 来 临 ，“ 企 业 在 
激烈 的 市 场 竞 争 中 要 取得 优势 ， 需 要 在 坚持 以 设计 思维 为 导 回 的 前 提 下 ， 
理解 “以 用 户 的 行为 为 核心 ”的 信息 组 织 方式 ， 以 用 户 社 群 为 基础 ， 以 体 
验 设 计 为 核心 ， 与 用 户 共同 创造 新 的 商业 模式 。 
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第 3 和 章 


目标 与 蓝图 一 一 设计 策略 (S ) 


3.1 | 设计 和 束 略 的 概念 


提 到 策略 ， 人 们 会 想到 谋略 、 策 划 等 意义 相近 的 词语 。 在 博弈 论 中 ， 
策略 是 最 重要 的 概念 ， 主 要 指 博 弈 中 参与 人 的 一 组 完整 的 相机 行动 计 
划 。 ”如 果 说 战略 是 指 方向 性 的 把 握 ， 策 略 则 是 基于 战略 的 具体 执行 。 

哈佛 商学 院 ( Harvard Business School ) 教授 马克 尔 。 波 特 ( Michael 
Poter ) ”在 其 著作 《竞争 策略 》( 1997 ) 中 首次 提出 将 “策略 ”定义 为 一 
种 思考 方式 ， 他 认为 策略 是 体现 与 竞争 对 于 差异 的 方式 ， 通 过 它 能 使 自己 
的 产品 与 众 不 同 。 

(1 ) 设计 策略 

设计 策略 是 发 生 在 设计 过 程 早 期 的 产品 和 项 目 计 划 ， 它 包括 定义 项 目 
最 终 形态 的 远景 、 确 定 实现 目标 的 执行 手段 。 设 计策 略 是 一 种 集 产 品 、 草 
销 和 服务 于 一 体 的 系统 性 设计 活动 ， 指 在 符合 和 保证 实现 企业 使 命 条 件 
下 ， 确 定 企 业 的 设计 开发 与 市 场 环境 的 关系 ， 明 确 企业 的 设计 开发 方向 和 
设计 竞争 对 策 ， 并 在 设计 中 体现 企业 文化 原则 ， 根 据 企 业 的 总 体 战 略 目 
标 ， 制 定 和 选择 实现 目标 的 设计 开发 计划 和 行动 方案 。 ”设计 策略 强调 设 
计 作 为 一 种 基因 存在 于 企业 的 安 观 组 织 管理 ， 前 景 规划 到 具体 的 项 目 管理 
开发 以 及 市 场 营销 各 个 层面 ， 并 发 挥 积极 作用 。 正 如 Crawford“ 所 认为 
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和 的 ， 设 计策 略 是 在 企业 整体 策略 的 指导 原则 下 ， 如 何 来 设计 新 产品 。 


ba 


Marty Cagan” 从 设计 策略 中 评估 产品 机 会 的 方向 ， 将 产品 价值 、 
目标 市 场 、 市 场 规 模 、 上 度量 指标 或 收益 指标 、 竞 和 争 格 局 、 竞 和 争 优势 、 
市 场 时 机 、 营 销 组 合 策 略 、 解 决 方案 要 满足 的 条 件 、 继 续 或 放弃 视 作 
寻找 产品 开发 策略 机 会 最 关键 的 10 个 要 素 ， 以 最 大 限度 地 节省 时 间 与 
金钱 成 本 。 

( 2 ) 产品 设计 策略 

产品 设计 策略 中 的 “产品 ” 既 可 以 指 实体 产品 ( 如 汽车 、 家 电 、 家 
具 )， 又 可 以 指 虚 拟 产品 ( 如 软件 、 网 站 、 移 动 应 用 等 )。 本 书 中 的 “ 产 
品 ” 专 指 后 者 。Eric M. 0lson，Rachel] Cooper，Stanley F，Slater “等 


因此 ， 产 品 设 计策 上 略 是 先 根 据 市 场 发 展 寻 找 产 品 的 机 会 与 突破 由， 再 对 整 
个 产品 线 从 宏观 到 微观 的 计划 、 探 制 以 及 布局 。 产 品 设计 策略 是 企业 发 展 
规划 的 重要 组 成 部 分 ， 是 企业 产品 设计 的 指导 方针 。 

因此 ， 企 业 必 须 先 明确 正确 的 设计 策略 ， 设 计 师 再 将 拟定 好 的 设计 策 
略 作 为 具体 设计 的 思路 与 方向 ， 展 开设 计 创 新 工作 。 正 确 的 产品 设计 策略 
是 企业 提升 产品 核心 竞争 力 的 有 效 途 径 。 产 品 设计 策略 通过 对 企业 内 外 部 
环境 的 分 析 ， 深 度 挖 掘 市 场 与 消费 者 的 潜在 需求 ， 准 确 把 握 未 来 扩 术 与 设 
计 的 发 展 趋 势 ， 并 结合 自 喘 的 条 件 制定 出 产品 设计 的 指导 方针 。 依 此 策略 
设计 出 的 产品 能 更 有 效 地 满足 消费 者 的 需求 ， 抢 占 市 场 先 机 。 

( 3 ) 产品 设计 策略 与 界面 设计 

产品 设计 策略 是 从 市 场 营 销 、 用 户 需 求 以 及 企业 自 喘 的 发 展 战略 、 
资源 配置 等 层面 对 产品 的 整个 生命 周期 做 一 个 安 观 的 规划 ， 并 对 具体 的 
业务 开展 起 到 指导 性 作用 ， 使 最 终 产品 进入 并 维持 恨 性 的 发 展 状态 。 在 
应 对 各 种 复杂 的 市 场 变化 和 满足 用 户 不 断 发 展 的 需求 的 情况 下 ， 产 品 设 
计策 略 需要 因 时 制 宜 地 做 出 相应 的 调整 。 而 作为 移动 应 用 设计 策略 的 表 
现 层 一 一 移动 应 用 的 界面 是 产品 设计 策略 执行 下 的 产品 实现 ， 是 产品 和 
用 户 最 直接 的 接触 血 ， 用 户 通 过 产品 界面 体验 产品 的 各 项 服务 ， 民 好 的 
用 户 体 验 界面 可 以 提升 移动 应 用 的 竞争 力 ， 从 而 最 终 实现 产品 设计 策略 
的 目的 。 

优秀 的 产品 设计 策略 对 具体 的 界面 设计 活动 起 到 积极 的 引导 作用 ， 设 
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计 师 在 界面 设计 过 程 中 需要 深刻 理解 并 围绕 产品 设计 策略 的 既定 方针 展开 7 
设计 ， 并 保证 最 终 的 设计 符合 产品 设计 策略 的 构想 。 与 此 同时 ， 用 户 在 使 ”> 
用 产品 时 ， 随 着 需求 的 发 展 ， 用 户 可 以 通过 产品 界面 将 需求 意见 实时 地 反 

馈 给 企业 ， 使 企业 能 迅速 地 调整 产品 设计 策略 ， 以 适应 市 场 的 发 展 。 因 

此 ， 产 品 设 计策 略 是 界面 设计 顺利 开展 的 安 观 保障 ， 界 面 设计 是 产品 设计 

策略 表现 层 的 微观 活动 。 从 应 用 研发 的 过 程 来 说 ， 产 品 设 计策 略 和 界面 设 

计 活 动 互 相反 映 和 影响 ， 应 用 研发 团队 需要 在 充分 理解 设计 策略 的 基础 上 

开展 具体 的 界面 设计 活动 。 在 此 基础 上 ， 本 书 将 产品 设计 策略 的 研究 内 容 

纳入 到 移动 应 用 界面 设计 的 方法 体系 。 


3.2| 基于 问题 的 设计 束 上 略 


在 日 前 生活 中 ， 人 们 总 会 遇 到 各 种 各 桩 的 问题 ， 霖 些 突 发 性 问题 的 
出 现 甚至 会 使 人 情绪 衣 演 。 例 如 ， 搭 乘 公 交 车 上 班 ， 途中 公交 车 引擎 出 
现 改 障 ， 而 此 时 距离 上 班 时 间 越 来 越 近 ;， 计算 机 突然 死机 ， 而 文档 并 没 
有 保存 ， 买 了 一 件 高 科技 产品 ， 看 完 说 明 书 后 却 仍然 不 会 用 。 一 些 不 起 
有 眼 的 弟 见 心理 疾病 也 困扰 看 患 病 人 人群， 如 您 高 症 、 强 迫 狂 、 拖 延 症 、 焦 
虑 症 、 窗 集 恐 惧 症 、 社 交 仅 惧 症 等 。 而 将 这 些 特定 的 问题 作为 设计 策略 
的 出 发 点 ， 能 够 更 快 地 理 清 思路 ， 触 发 灵感 ， 同 时 也 是 一 种 具有 社会 意 
义 的 方法 。 

实际 上 ， 发 生 在 人 们 身上 任何 一 个 小 的 问题 、 障 碍 、 困 难 都 可 以 作为 
思考 设计 的 入 口 。 例 如 ， 针 对 害怕 抽 血 的 人 群 ， 血 液 检 测 公 司 Theranos 
发 明了 一 种 血液 检 疯 方法 ( 见 图 3-1 )。 用 一 个 小 北 置 在 用 户 指 头 上 取 几 
泣 血 ， 整 个 过 程 不 像 被 针 扎 ， 而 像 是 被 轻 轻 训 了 一 下 。 这 梓 的 做 法 不 仅 降 
低 了 抽 血 的 疼痛 感 ， 还 缩小 了 抽 血 的 创口 。 不 仅 如 此 ， 该 公司 通过 一 漳 血 
的 样本 就 能 完成 30 余 项 血液 检测 项 目 ， 比 第 规 的 验 血 模式 更 加 环保 。 

互联 网 产品 ， 特 别 是 移动 互联 网 产品 ， 其 概念 形成 的 过 程 都 是 选取 一 
个 自己 、 他 人 或 社会 中 人 过 到 或 存在 的 问题 进行 剖析 并 寻找 合适 的 解决 方 
案 ， 这 无 疑 是 一 种 比较 有 效率 的 设计 思维 方式 。 基 于 问题 的 设计 策略 模型 
包括 以 下 4 个 方面 的 内 容 : 提出 问题 、 寻 找 答案 、 解 决 问 题 、 设 计 验 证 
网 图 = 上 
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提出 问题 





3-1 Theranos 公司 发 明 的 验 血 方法 
( 图 片 来 源 ，www.theranos.com ) 





设计 和 触 友 操 


) 来 自生 酒 中 的 疑问 相 困 难 


a at te “ 床 烦 ”“ 忧 上 度 ”"“ 疑 惑 ” 所 困 
扰 ， es 使 人 们 产生 大 量 的 负面 情绪 。 下 面 可 以 多 从 吃 穿 住 用 


行 这 


住 /买房 


用 /办 事 . 
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个 方 徊 来 看 看 生活 中 经 常 遇 到 的 问题 。 


选择 哪 家 餐厅 比较 好 呢 ? 

吃 什 么 样 的 食物 才 比 较 健 康 ? 
$ 测 食品 是 否 安 全 ? 

怎么 学 会 做 饭 ? 
A B、C 穿 哪 一 件 好 呢 ? 
去 哪里 租 服 效 比 较 划 算 ? 
衣服 穿 过 一 段 时 间 后 可 以 退换 货 吗 ? 
ee 
房屋 泛 修 的 时 间 可 以 缩短 吗 ? 
如 何 选 择 合适 的 房屋 装修 设计 方案 ? 
如 何 评 人 房屋 内 的 空气 质量 ? 
未 来 房价 的 走势 会 怎么 样 呢 ? 现在 适合 买房 吗 ? 
如 何 有 效 地 管理 个 人 的 工作 任务 ? 
如 何 提 高 会 议 的 议事 效率 ? 
不 用 的 产品 如 何 回 收 利 用 ? 
为 什么 营业 厅 办 理 一 项 业务 的 手续 那么 复杂 ? 如 何 提高 办 
事 效 率 ? 
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生活 中 的 疑问 、 困 难 分 析 原因 寻找 解决 方案 提出 解决 方案 


社会 热点 话题 案 的 可 行 性 
品 通过 用 户 体验 后 的 
受到 已 有 互联 网 产品 的 启发 所 


一 设计 验证 ”一 > 
(Verificatiom) 


图 3-2 ”基于 问题 的 设计 策略 模型 








为 什么 按照 指示 有 牌 走 却 仍然 走 销 了 路 口 ? 
如 何 有 效 避 免 出 行 中 的 堵车 问题 ? 
1 a 

在 旅游 途中 遇 到 危险 怎么 自救 ? 

以 上 问题 都 曾经 在 生活 和 工作 中 遇 到 过 ， 目 前 也 有 很 多 企业 、 团 队 甚 
至 设计 师 正在 研究 如 何 解 决 这 些 问 题 。 这 要 求 设 计 师 热爱 生活 ， 善 于 观 紧 
和 发 现 生活 中 的 问题 ， 并 对 其 进行 思考 和 分 析 ， 由 此 而 形成 的 设计 策略 模 
型 就 可 能 会 创造 巨大 的 价值 。 





行 /旅游 : 





在 设计 策略 模型 构建 的 阶段 ， 如 果 关 注 社 会 中 已 经 出 现 并 亟待 解决 的 
问题 ， 就 会 使 产品 容易 产生 社会 共鸣 ， 更 加 具有 社会 意义 和 价值 。 例 如 : 
关系 ， 人 与 人 之 则 关系 冷 浇 、 信 任 感 弱 ， 如 何 使 社区 内 邻里 之 则 进 
行 有 效 的 互动 ? 
秩序 : 行人 模 穿 马路 ， 如 何 引 导 大 家 遵守 交通 规则 ? 
看 病 : 看 病 难 ， 如 何 减少 病人 排队 等 候 的 时 间 ? 
人 们 喜欢 乱 扔 垃圾 ， 如 何 提 高 大 家 的 环保 及 垃圾 分 类 的 


环境 : 音 in2 
让 业 大 学 生 毕 业 后 找 不 到 合适 的 工作 ， 如 何 帮 助 毕业 生 寻 找到 心 
Bs 


仪 的 工作 ? 

弱势 : 残障 人 士 生活 不 便 ， 如 何 为 残障 人 士 设 计 一 款 好 用 的 手机 ? 
老人 : 老年 人 幸福 感 降 低 ， 如 何 帮 助 空 梨 老 人 降低 晚年 的 孤 裤 感 ? 
企业 ， 企业 亏损 严重 ， 如 和 何 帮助 传统 企业 转型 ， 跟 上 时 代 发 展 的 趋 

本 

(3) 受到 已 有 互联 网 产品 的 局 发 

在 分 析 市 场 现 有 产品 优 缺 点 的 基础 上 构建 新 产品 的 设计 策略 ， 是 最 直 
观 的 设计 策略 模型 的 染 构 方式 。 例 如 : 
用 户 在 网 上 购物 时 ， 除 了 低 价 还 会 关注 什么 ? 
为 什么 微 信 能 在 同类 即时 通信 服务 App 中 脱 疾 而 出 ? 它 的 
和 
为 什么 所 有 的 产品 都 在 无 限制 地 增加 功能 ? 
面向 设计 ”为 什么 人 苹果 0S X 系统 的 Dock 栏 默 认 在 屏幕 下 方 总 是 显示 ? 
细节 为 什么 感 吕 页 面 加 载 很 慢 ? 


看 癌 产 品 
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3.2.2 ”寻找 舍 东 一 一 设计 切入 忆 


在 寻找 解决 方案 的 过 程 中 ， 咎 没有 一 个 明确 的 目标 ， 则 很 容易 迷失 方 
问 。 无 论 问题 的 形态 如 何 ， 找 寻 答 案 的 过 程 应 该 始终 围 比 “ 用 户 ” 而 展 
开 。 与 此 同时 ， 设 计 不 是 孤立 存在 的 ， 它 还 要 与 市 场 相 结合 ， 寻 求 准确 的 
市 场 定位 。 此 外 ， 为 了 使 产品 更 富有 创新 价值 ， 对 同类 竞争 产品 的 分 析 与 
研究 就 显得 尤为 重要 。 

(1) 用 户 

寻找 设计 的 切入 点 需要 具有 一 定 的 针对 性 。 知 产品 面向 特定 的 人 群 ， 
那么 就 需要 进行 特定 目标 用 户 的 分 析 ; 各 产品 是 为 了 解决 大 部 分 人 的 问 
题 ， 或 者 解决 方案 具有 普 适 性 ， 那 么 就 需要 进行 非 用 户 分 析 。 

] ) 面 癌 特定 目标 用 户 。 目 标 用 户 分 析 可 以 从 特定 用 户 的 职业 育 景 、 
文化 层次 、 生 活 习惯 、 购 买 能 力 等 几 个 层面 来 挖掘 产品 的 潜在 需求 点 。 挖 
掘 到 的 信息 可 以 进行 优先 级 的 强 弱 排序 ， 分 析 的 结果 将 作为 产品 研发 的 主 
要 依据 。 

2 ) 面向 非 用 户 。 非 用 户 分 析 是 要 思考 如 何 将 产品 的 潜在 用 户 转 化 为 
产品 的 真正 用 户 。 产 品 的 发 展 需 要 采取 非 用 户 研 究 的 战略 。W. 钱 ，。 金 
( W.Chan Kim ) 与 勒 妮 。 莫 博 涅 ( Renee Mauborgne ) 一 将 非 用 户 分 为 三 个 
层次 ( 见 图 3-3 )。 





未 探知 型 
非 用 户 






面 癌 非 用 户 


“Sg 


3=3 相同 
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3 ) 准 非 用 户 : 距离 相关 产品 最 近 但 却 处 于 产品 市 场 的 边界 ， 他 们 是 
出 于 必要 需求 而 最 低 限 度 地 使 用 产品 和 服务 的 用 户 群 。 一 旦 有 更 好 的 选 
择 ， 他 们 会 放弃 使 用 此 产品 。 因 此 产品 开发 团队 要 密切 观察 这 类 用 户 ， 并 
关注 他 们 反馈 中 所 提 及 的 相同 问题 ， 进 行 有 效 的 改善 。 

4 ) 拒绝 型 非 用 户 : 拒绝 市 场 中 的 一 切 相 关 产 品 与 服务 。 即 使 这 类 产 
品 和 服务 可 以 满足 他 们 的 需求 ， 他 们 也 不 愿意 使 用 。 应 用 开发 团队 需要 寻 
找 这 些 顾 客 拒 绝 使 用 的 原因 ( 如 营销 手段 、 功 能 、 价 格 等 )， 分 析 并 找 出 
他 们 的 共同 总 ， 最 后 再 通过 运营 、 产 品 需 求 变 更 等 一 系列 手段 逐步 将 他 们 
拉 近 市 场 。 

5 ) 未 探知 型 非 用 户 : 距离 相关 产品 市 场 很 远 ， 他 们 从 未 考虑 过 要 使 
用 此 类 产品 或 服务 。 企 业 也 较 少 将 此 类 用 户 看 作 产 品 的 目标 用 户 或 潜在 用 
户 。 实 际 上 ， 这 类 用 户 的 数量 往往 比较 庞大 。 企 业 或 产品 开发 团队 可 以 进 
一 步 思 考 他 们 拒绝 该 产品 的 原因 ， 找 到 原因 后 再 寻找 设计 的 切入 所 。 

不 同 产品 的 非 用 户 层 次 规模 也 不 同 ， 而 三 个 层次 的 非 用 户 群 体 也 有 重 
亚 的 可 能 性 。 因 此 ， 企 业 和 开发 团队 可 以 根据 市 场 环境 与 产品 发 展 情况 ， 
有 计划 地 转化 非 用 户 层 ， 满 足 他 们 的 需求 ， 从 而 扩大 产品 的 市 场 品 有 率 。 

( 2 ) 市 场 

对 市 场 的 分 析 能 使 产品 不 仅 具 有 用 户 价 值 ， 还 具有 市 场 价 值 ， 使 产品 
的 发 展 空间 更 加 广阔 。 无 论 是 创业 公司 ， 还 是 拥有 一 定 市 场 基础 的 大 型 企 
业 ， 在 产品 规划 之 初 ， 均 需 思 考 产品 目标 市 场 及 其 投放 市 场 的 原因 和 价 
值 。 成 功 的 企业 往往 将 视 终 瞳 准 市 场 业 务 中 绾 含 商业 潜力 的 空白 地 珊 ， 这 
样 更 易 使 产品 获得 成 功 。 

SWOT 方法 能 帮助 人 们 快速 找到 市 场 环境 中 的 各 种 有 利 与 不 利 因 素 ， 
从 而 有 效 地 引导 设计 策略 的 制定 。SWOT 分 析 法 由 美国 管理 学 家 安德鲁 斯 
( Andrews ) 于 1971 年 在 其 《公司 战略 概念 》 一 书 中 提出 ，S ( Strength ) 
代表 市 场 优 势 ，W ( Weakness ) 代表 市 场 弱势 ，0 ( 0pportunity ) 代表 市 
场 机 会 ，T ( Threat ) 代表 市 场 威胁 。 此 决策 分 析 方 法 能 较 好 地 体现 组 织 
目标 与 内 外 因素 协调 统一 的 哲学 思想 ， 因 此 得 到 了 广泛 的 运用 。” 

市 场 机 会 与 威胁 是 对 企业 外 部 环境 的 分 析 ， 而 市 场 优势 与 弱势 是 对 企 
业内 部 环境 的 分 析 。 外 部 环境 分 析 可 以 帮助 企业 寻找 市 场 中 的 机 会 ， 并 规 
好 一 些 市 场 中 的 不 利 因 素 。 内 部 环境 分 析 可 以 使 企业 认识 到 究竟 应 该 局 限 
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在 原 有 优势 领域 发 展 ， 还 是 去 开拓 并 发 展 其 他 优势 。 因 此 ， 对 企业 外 部 环 7 
境 与 内 部 环境 的 正确 分 析 是 设计 策略 制定 和 实施 的 基础 。 企 业 无 须 纠 正 所 ”> 
有 的 弱势 ， 也 并 非 要 对 全 部 优势 加 以 利用 ， 而 是 要 在 正确 设计 策略 的 指导 
下 ， 集 中 优势 资源 发 展 具有 核心 竞争 力 的 产品 。 

根据 企业 的 发 展 战略 、 产 品 的 市 场 增长 态势 及 竞争 地 位 ， 常 见 的 以 市 
场 为 导向 的 产品 设计 策略 可 以 分 为 一 体 化 策略 、 强 化 策略 、 跟 随 策略 与 防 
御 策 略 ( 见 图 3-4 )。 








3-4 ”以 市 场 为 导向 的 设计 策略 


1 ) 一 体 化 策略 ， 由 一 个 核心 产品 或 产品 的 核心 功能 发 散 出 多 元 化 的 
服务 ， 使 产品 与 服务 整合 成 为 一 个 有 机 的 系统 。 一 体 化 策略 的 关键 因素 是 
发 气 用 户 的 淤 在 需求 ， 提 供 各 种 不 同 的 增值 服务 产品 。 例 如 ， 互 联网 产品 
“淘宝 网 ”除了 采用 B2C 与 C2C 的 商业 模式 为 用 户 提供 一 个 自主 选 购 商品 
的 平台 外 ， 还 提供 支付 ( 文 付 宝 八 导购 (一 淘 儿 团购 ( 聚 划算 ) 生活 
( 淘宝 本 地 生活 )、 旅 行 ( 淘宝 旅行 ) 等 一 系列 衍生 的 服务 产品 。 

2 ) 强化 策略 : 使 投放 市 场 的 新 产品 与 现 有 产品 相 比 ， 在 产品 功能 、 
反 术 和 服务 上 有 一 定 的 提升 和 创新 ， 同 时 还 可 以 通过 强势 的 市 场 营 销 手 段 
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4 来 辅助 其 扩大 市 场 占 有 率 ， 如 广告 投资 、 活 动 推广 等 。 


3 ) 跟随 策略 : 将 竞争 对 于 的 产品 进行 改良 ， 并 根据 自身 产品 特 氮 寻 
求 突破 ， 争 取 占 领 市 场 。 此 策略 目标 明确 、 风 险 较 小 、 市 场 反 应 较 快 ， 但 
也 容易 导致 产品 严重 同 质 化 的 不 良 现象 。 

4 ) 防御 策略 :适用 于 逐渐 走向 低 合 的 产品 与 新 产品 的 开发 。 针 对 市 
场所 有 率 和 产品 使 用 率 逐 潮 降低 的 产品 ， 企 业 可 以 采用 收 绷 产 品 线 、 减 少 
品 资源、 放弃 产品 短期 的 发 展 策略 以 保证 企业 整体 的 盘 利 效率 。 针 对 新 
品 ， 企 业 可 以 有 选择 地 开发 低 风 险 且 属于 企业 主要 产品 结构 类 型 的 产 
品 ， 以 保持 企业 现 有 的 市 场地 位 和 竞争 力 。 此 筑 略 风险 较 小 、 产 品 失 败 的 
概率 较 低 ， 但 其 产品 很 难 在 市 场 中 及 入 而 出 。 

( 3 ) 竞争 者 

竞争 者 分 析 是 整个 产品 规划 的 重要 依据 ， 其 分 析 研 究 结 果 能 即时 地 
帮助 产品 开发 团队 发 现 和 制定 产品 中 具有 独特 核心 竞争 力 的 特征 及 功 
能 。 根 据 已 有 的 实际 项 目 经 验 认 为 ， 对 竞争 产品 的 分 析 可 以 从 了 解 国内 


外 领 移 的 产品 体验 设计 和 商业 模式 开始 ， 总 结 其 发 展 的 特点 和 用 户 需 求 
实现 的 趋势 。 


市 场 上 的 竞争 格局 往往 是 多 维 的 ， 它 包括 新 入 者 的 威胁 、 新 产品 服务 
的 威胁 、 现 有 公司 间 的 竞争 以 及 买卖 双方 的 讨价还价 能 力 等 。 移动 互 联网 
产品 的 竞争 一 般 来 和 目 于 产业 内 的 竞争 ， 如 同类 产品 间 的 竞 和 邹 。 为 了 在 竞争 
中 立 于 不 败 之 地 ， 企 业 需 要 良好 设计 策略 的 指导 与 帮助 。 

迈克 尔 。 波 特 ( Michael Porter ) “将 竞争 策略 分 为 总 成 本 领先 策略 
( Overall Cost Leadership )、 差 异化 策略 ( Differentiation ) 与 目标 集聚 
策略 ( Focus )， 如 图 3-5 所 示 。 


总 成 本 领先 策略 


/ 
/ 
/ N\ 
/ 、\ 
/ 、\ 


差异 化 策略 上 -一 -了 目标 集聚 策略 


3-5 迈克尔。 波 特 ( Michael Porter ) 的 三 种 竞争 策略 
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品牌 与 产品 功能 和 质量 差异 不 大 的 前 提 下 ， 那 些 价格 比 同 类 竞争 对 手 低 的 7 
产品 ， 将 获得 更 大 的 市 场 份额 和 销售 额 。 “pr 

2 ) 差异 化 策略 ， 核 心思 想 是 在 市 场 上 同 质 类 产品 较 多 的 环境 下 ， 针 
对 价格 不 敏感 的 用 户 推 出 独特 服务 与 功能 的 产品 ， 将 提升 其 品牌 价值 和 用 
户 忠 诚 度 。 差 异化 策略 主要 以 用 户 偏好 与 需求 为 基础 。 

3 ) 目标 集聚 策略 ， 核心 思想 是 在 特殊 用 户 群 体 需求 无 法 被 满足 的 背 
景 下 ， 而 主要 竞争 对 手 也 未 将 视线 瞄准 这 类 市 场 时 ， 产 品 聚 焦 在 这 类 用 户 
及 市 场 中 便 能 获得 成 功 。 目 标 集聚 策略 是 围绕 为 某 一 特殊 目标 群体 服务 的 
理念 而 建立 有 的 6 

由 此 可 以 分 析 得 出 领先 的 成 本 利用 率 、 受 欢迎 的 产品 特色 、 挖 握 有 潜 
力 的 蓝海 市 场 是 以 竞争 为 核心 机 制 的 产品 设计 策略 重要 方法 。 在 竞争 的 过 
程 中 求 “ 变 "、 求 “新 ”是 该 类 产品 设计 策略 成 功 的 关键 因素 。 

竞 品 分 析 方法 如 下 . 

首先 ， 要 开展 竞争 产品 选择 ， 既 要 选择 具有 直接 竞争 关系 的 产品 ， 又 
要 选择 对 自身 产品 有 一 定 借鉴 意义 的 ( 在 国内 外 颇 受 好 评 ) 领导 产品 。 这 
样 才能 更 全 面 地 了 解 行业 内 的 发 展 动态 ， 为 设计 策略 的 制定 提供 全 面 的 分 
析 数 据 。 

其 次 ， 进 行 竞 品 分 析 时 ， 企 业 需 要 密切 关注 其 中 20% 最 有 参考 价值 的 
竞争 产品 ， 选 择 一 两 件 最 优秀 的 产品 从 用 户 群 、 产 品 版 本 、 收 费 策略 、 体 
验 优 劣 势 、 产 品 核心 功能 等 多 个 维度 进行 比较 分 析 研 究 。 产 品 开发 团队 中 
的 各 成 员 应 结合 自身 的 职能 定位 对 竞 品 进行 不 同 侧重 的 专业 分 析 ， 并 得 出 
建设 性 的 结论 ， 作 为 后 续 产 品 设 计 研发 的 参考 意见 。 

最 后 ， 输 出 分 析 文 档 ， 竞 争 对 手 分 析 文 档 应 该 是 全 面 、 立 体 和 灵活 
的 。 将 团队 内 不 同 职能 成 员 的 分 析 文 档 整 合成 一 个 有 机 统一 的 竞争 对 手 文 
档 ， 这 样 利 于 团队 在 讨论 时 对 文档 进行 批注 。 与 此 同时 ， 竞 争 对 手 分 析 文 
档 应 该 随 着 竞 品 的 变化 、 产 品 研发 推进 以 及 产品 需求 的 变更 ， 随 时 进行 补 
充 和 完善 。 

以 竞争 为 核心 机 制 的 产品 设计 策略 需要 挑选 合适 的 竞 品 做 调研 分 析 ， 
了 解 竞争 对 手 的 发 展 动 态 ， 并 寻找 或 明确 自身 的 竞争 优势 ， 为 该 类 产品 设 
计策 略 的 制定 提供 研究 基础 。 竞 品 分 析 示 例 见 表 3-1。 
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A 


re 本 二 人 支持 用 户 自 定义 
有 人 ”| 日程， 系统 定时 提醒 


3.2.3 ”解决 问题 


设计 团队 需要 在 这 一 阶段 吸收 前 期 研究 的 萌 养 ， 从 产品 用 户 的 角度 提 
出 设计 概念 。 它 应 该 包含 产品 大 致 的 功能 和 锥 形 ， 思 攻 产 品 在 商业 和 技术 
上 的 可 行 性 。 有 具体 的 产品 设计 、 设 计 细 和 、 体 验 优化 等 工作 应 该 放 到 后 续 
的 设计 实践 环节 去 思考 。 竞 争 产 品 调 赋 方法 如 图 3-6 所 示 。 








和 人 入 
/\ 














竞争 产品 的 选择 ga 
E 音 品 与 售 } d 合 与 评 乡 
与 收集 竞争 产品 材料 的 分 类 与 租 选 ”| 材料 的 整合 与 评级 报告 分 析 
3-6 竞争 产品 调研 方法 
) 找 准 产品 方 癌 
六 及 中 的 法 需 要 在 这 个 阶段 逐步 筛选 明确 ， 在 众多 的 概念 中 挑选 一 
个 最 佳 概 念 沿 着 这 个 | 方 回 深入 控 所 下 去 。 


] ) he 有 气 。 功 能 杭 理 是 明确 产品 研发 方向 的 基础 内 容 。 产 品 
功能 分 为 核心 功能 与 辅助 功能 。 核 心 功能 主要 满足 用 户 最 重要 、 最 基本 的 
需求 ， 辅 助 功能 是 围绕 核心 功能 展开 的 额外 功能 。 例 如 ， 一 本 杂志 应 用 的 
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核心 功能 是 给 用 户 提供 图 片 及 文字 阅读 、 杂 志 下 载 等 服务 。 除 此 之 外 ， 杂 
志 还 提供 关键 词 查找 、 分 享 的 辅助 功能 等 。 

2 ) 产品 特色 。 产 品 特色 也 就 是 产品 的 核心 竞争 力 ， 它 能 为 用 户 带 来 
价值 的 亮点 ， 一 般 从 形式 和 功能 两 个 方面 考虑 。 

@ 形式 上 的 特色 : 通过 企业 文化 表现 产品 特色 ， 在 产品 的 视觉 表现 
上 追求 一 种 突出 的 风格 。 例 如 ， 人 谷歌、 腾讯、 百度 等 多 家 企业 的 互联 网 及 
移动 互联 网 产品 都 带 有 了 明显 和 一 致 的 品牌 基因 ， 保 证 用 户 能 拥有 连贯 性 的 
体验 感受 。 

@ 功能 上 的 特色 ， 在 市 场 竞争 中 具有 创新 价值 的 产品 功能 。 例 如 ， 
视频 拍摄 软件 美 拍 的 产品 特色 是 让 用 户 在 10s 之 内 快速 拍摄 、 编 辑 一 款 个 
性 的 小 短片 。 短 片 编辑 中 为 用 户 提供 了 风格 各 异 的 模板 ， 使 用 户 几 乎 不 费 
力气 就 能 编辑 出 精彩 的 专属 视频 。 操 作 简 单 、 输 出 精美 是 美 拍 这 款 软件 最 
大 的 特点 。 

( 2 ) 为 三 种 用 户 设 计 

在 设计 概念 构思 的 过 程 中 ， 需 要 假 
设 不 同 用 户 的 特点 和 习惯 、 用 户 使 用 时 中 间 用 户 
的 状态 和 情境 等 。 

一 般 情况 下 ， 面 向 具体 的 设计 概念 
需要 从 三 种 不 同 层 次 的 用 户 进行 分 析 。 面向 设计 
而 用 户 层次 划分 的 依据 是 他 们 对 于 产品 。 
具体 功能 、 技 术 的 了 解 和 熟悉 程度 ( 见 
oe 

@ 新 手 用 户 : 第 一 次 接触 产品 或 图 3-7 用 户 的 三 个 层次 
对 产品 不 太 熟 悉 的 用 户 群体 。 这 类 人 群 往往 拥有 较 大 基数 ， 他 们 的 未 知性 
和 弹性 也 更 大 。 对 于 产品 本 身 来 说 ， 新 手 用 户 是 富有 挑战 性 的 。 在 使 用 产 
品 初期 ， 若 任务 执行 失败 便 会 使 他 们 产生 挫败 感 。 

@ 中 间 用 户 : 产品 黏着 度 最 高 的 人 群 。 他 们 了 解 产 品 的 概念 与 特 
性 ， 并 掌握 了 绝 大 部 分 的 使 用 技巧 ， 但 对 于 产品 的 高 级 功能 ， 他 们 很 少 尝 
试 。 中 间 用 户 对 产品 的 信任 感 强 ， 使 用 产品 的 目标 比较 明确 。 

@) 专家 用 户 : 深入 了 解 产 品 ， 精 通 产品 所 有 功能 的 用 户 。 这 类 人 群 
的 欲望 永远 无 法 得 到 满足 ， 他 们 渴望 产品 能 不 断 输出 令 他 们 惊喜 的 东西 。 
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专家 用 户 往往 能 为 产品 体验 和 功能 提出 具有 价值 的 参考 意见 。 
3.2.4 ”检验 一 一 设计 验证 


设计 师 需 要 有 反思 精神 ， 因 此 设计 验证 更 像 是 一 种 思维 方式 ， 贯 穿 
于 整个 设计 流程 中 。 Ue = 
当 后 乡 卖 设 计 实 践 ; 动 真正 开展 时 ， 还 需 进行 产品 的 可 用 性 测试 等 车 设计 
验证 活动 。 

对 设计 概念 的 验证 是 对 初步 概念 进行 细 化 ， 并 考虑 各 种 限制 因素 ， 
确 重 要 功能 ， 完 善 概 念 的 可 行 性 。 具 体验 证 方法 如 下 : 

5WIHIV 一 一 设计 团队 成 员 结 合 自 己 或 身边 人 的 特点 、 喜 好 、 习 惯 等 进 
行 分 析 ( 个 人 数据 )。 

卡 语 模 型 一 一 设计 团队 结合 用 户 进 行 分 析 ， 需 要 进行 用 户 调研 (小 \ 
数据 )。 

A 需要 与 数据 分 析 师 合 
作 ， 调 用 相关 数据 ( 大 数据 )， 运 用 数据 挖掘 的 方法 对 设计 概念 进行 预测 
和 和 校 验 。 

(1 ) 对 设计 的 反思 一 一 “5W1H1V” 分 析 法 

Who ( 用 户 ):， 使 用 该 产品 的 用 户 是 谁 ? 

What ( 产品 ): 用户 能 用 产品 及 产品 中 的 功能 做 什么 ? 

Where ( 环境 )， 用 户 会 在 哪里 使 用 该 产品 或 功能 ? 

When ( 时 间 );， 用户 会 在 什么 时 候 用 该 产品 或 功能 ? 

Why ( 原因 ): 用 户 为 什么 选择 并 使 用 该 产品 ? 用 户 为 什么 需要 这 个 


该 产品 和 其 他 产品 有 什么 区 别 ? 

How (方式 )， 用 户 如 何 使 用 该 产品 ? 

Value ( 价值 ):， 该 产品 的 价值 是 什么 ? 能 为 用 户 提 供 什么 价值 ? 

5W1H1V 分 析 法 列 锭 了 构成 一 个 成 功 应 用 概念 的 基本 要 素 ， 如 用 户 、 
使 用 情境 、 使 用 方式 等 。 产 品 需要 通过 这 些 基本 要 素 验证 其 设计 概念 的 可 
行 性 ， 帮 助 团队 更 好 地 理解 与 完善 产品 概念 。 
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(2 ) 对 设计 的 评估 一 一 卡 语 模 型 验证 法 

卡 语 模 型 是 产品 中 吕 口 质 创 造 的 重要 理论 模型 。 日 本 东 和 理工 大 学 教授 狩 
辕 纪 昭 ( Noriaki Kano ) 和 他 的 同事 Fumio Takahashi“ 于 1984 年 提出 了 
卡 诺 模 型 ( Kano Model )， 又 称 为 二 维 品质 模型 ( Two-dimension 
Model1) 。 二 维 包 含 了 两 个 维度 : 从 产品 的 品质 角度 考虑 ， 属 于 客观 的 产 
品 机 能 或 功能 ; 从 用 户 对 产品 的 满意 度 进 行 考 量 ， 属 于 用 户 的 主观 感受 。 

卡 诡 模 型 ( 见 图 3-8 ) 主要 用 来 评估 产品 框架 和 有 具体 功能 。 当 产品 概 
念 基本 确定 之 后 ， 可 以 通过 对 用 户 的 调研 ， 总 结 得 出 产品 中 哪些 功能 才 是 
用 户 认 为 最 重要 的 功能 ， 而 哪些 是 不 必要 的 功能 ; 什么 样 的 功能 才能 真正 
满足 用 户 的 需求 ， 什 么 桩 的 功能 是 用 户 不 愿意 或 根本 不 会 去 使 用 的 功能 。 


而 总 兴奋 型 需求 魅力 品质 ) 
期 望 需求 (一 维 品 质 ) 






中 性 需求 (无 差异 品质 ) 


产品 品质 好 


3-8 卡 诺 ( Kano ) 模型 


(DD 基本 需求 ( 必要 品质 ): 用 户 对 产品 的 基本 需求 。 这 类 需求 不 一 定 
能 使 用 户 的 满意 度 提 升 ， 但 硬 不 提供 此 类 需求 ， 用 户 的 满意 度 则 会 大 幅度 

@ 期 望 需求 ( 一 维 品 质 )， 用 户 对 产品 某 些 功能 的 需求 。 若 产品 包含 
了 用 户 期 望 的 某 些 功 能 ， 则 用 户 的 满意 度 会 提升 ， 寿 没有 ， 则 用 户 的 满意 
度 就 会 降低 。 也 就 是 诗 ， 产 品 一 维 品 质 越 好 ， 客 户 的 满意 度 越 高 ， 反 之 则 
会 带 来 负面 评价 。 用 户 满意 度 与 一 维 品 质 成 正比 。 

(3) 兴奋 型 需求 ( 魅力 品质 )， 用 户 意 想不到 的 需求 。 该 类 需求 是 用 户 
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中 |.- 宇 潜在 的 需求 ,他们 自己 不 会 要 求 这 方面 的 属性 。 若 提供 此 需求 ， 用 户 满意 
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度 则 会 有 较 大 提升 ， 增 幅 远 高 于 一 维 品 质 ， 硅 不 提供 用 户 意 想不到 的 需 
求 ， 用 户 满 意 度 也 不 会 降低 。 

魅力 品质 是 对 产品 创新 与 提升 体验 的 追求 ， 在 设计 中 它 往 往 是 产品 的 
凡 睛 之 笔 。 每 一 个 创新 优 民 的 功能 或 体验 都 能 为 产品 增加 魅力 值 。 因 此 ， 
菊 力 品质 需要 建立 在 目标 用 户 的 基础 上 ， 通 过 挖掘 他 们 潜在 的 需求 寻找 设 
计 的 创新 氮 ， 以 发 掘 真正 具有 价值 的 品质 。 

(4) 中 性 需求 ( 无 差异 品质 )， 用 户 不 重视 的 需求 。 无 论 提 供 或 不 提供 
此 需求 ， 用 户 满意 度 都 不 会 改变 。 

无 替 寞 品质 用 来 提醒 设计 团队 ， 设 计 要 聚焦 在 核心 的 产品 功能 上 ， 应 
该 尽量 避免 投入 过 多 时 间或 精力 在 不 重要 或 不 必要 的 需求 中 。 

此 外 ， 无 差异 品质 也 可 能 转化 为 一 维 品 质 、 必 要 品质 和 魅力 品质 ， 但 
转化 需要 具有 说 服 力 的 用 户 研 究 数据 来 验证 。 

(5) 负 辣 需求 ( 负面 品质 )， 用 户 不 喜欢 的 功能 。 只 要 在 产品 中 出 现 了 
该 类 需求 ， 用 户 的 满意 度 就 会 降低 。 人 负面 品质 分 析 可 以 帮助 设计 团队 了 解 
设计 中 应 该 避免 的 问题 。 


3-9 所 示 为 即时 通信 工具 一 一 秘 信 有 的 卡 讶 模型 。 





奋 型 需求 


满意 兴奋 型 需求 : 
揪 一 揪 添 加 好 友 、 免 费 表情 、 朋 友 圈 互 动 









中 性 需求 : 
微 信 内 搜索 、 星 标 朋友 


期 望 需求 : 


群 聊 、 新 建 群 、 订 阅 公众 账号 


产品 品质 差 产品 品质 好 
负 向 需求 : 基本 需求 : 
垃圾 广告 推 聊天 、 查 找 好 友 、 个 人 设置 


不 满意 
3-9 ”即时 通信 工具 一 一 第 信 的 卡 语 模型 


卡 证 模型 是 以 用 户 需 求 为 导 同 的 产品 验证 方法 。 上 下 次 模型 分 析 能 帮助 
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设计 团队 做 出 判断 和 决策 。 在 进行 卡 诺 模型 分 析 之 前 ， 设 计 团队 应 该 派出 7 
研究 人 员 ， 通 过 用 户 问卷 调查 、 访 谈 等 形式 获取 用 户 的 真实 想法 ， 从 而 对 -于 
一 些 暂 时 没有 明显 价值 的 需求 和 功能 进行 舍弃 。 

卡 诺 模型 不 是 直接 用 来 测量 用 户 满意 度 的 方法 ， 而 是 通过 对 用 户 的 不 
同 需求 层次 进行 区 分 处 理 ， 帮 助 设 计 师 找 出 提高 用 户 满意 度 的 设计 策略 。 
因此 ， 了 解 不 同 层次 的 用 户 需求 有 利于 找 准 设计 痛 点 ， 辅 助 后 续 设 计 活 动 
的 有 效 展 开 。 

卡 诺 模 型 定位 用 户 的 需求 层次 做 到 真正 从 用 户 的 需求 出 发 ， 并 且 引 入 
检查 和 反馈 机 制 进行 产品 设计 监控 ， 帮 助 研发 团队 有 效 地 解决 问题 ， 改 进 
设计 方案 ， 以 形成 一 个 良性 循环 的 设计 及 管理 机 制 。 

( 3 ) 对 设计 的 理性 验证 一 一 数据 分 析 验 证 法 

如 今 ， 随 着 大 数据 概念 的 广泛 应 用 ， 人 们 对 数据 的 信任 和 依赖 程度 不 
断 上 升 。 这 是 由 于 数据 是 客观 真实 的 ， 它 不 受 任何 人 主观 意识 的 影响 ， 数 
据 也 是 透明 的 ， 它 能 真实 反映 用 户 的 思想 和 行为 。 要 分 析 数 据 与 设计 之 间 
的 关系 ， 即 数据 分 析 发 生 了 什么 ( What )， 而 用 户 体验 的 方法 则 是 为 了 研 
究 为 什么 发 生 ( Why ) ( 见 图 3-10 )。 如 果 把 发 生 什 么 和 为 什么 结合 在 一 
起 ， 就 能 为 企业 建立 强大 的 决策 制定 引擎 。 

因此 ， 产 品 概念 除了 要 进行 定性 的 用 户 研究 外 ， 适 时 地 向 数据 分 析 师 
调用 数据 展开 定量 分 析 是 很 有 必要 的 。 因 为 这 些 大 数据 能 从 客观 的 角度 帮 
助 设计 团队 看 到 用 户 真 实 的 行为 习惯 ， 寻 找到 用 户 行为 之 间 的 相关 性 ， 准 
确 判 断 用 户 需 求 ， 并 最 终 做 出 决策 。 例 如 ， 通 过 数据 分 析 ， 用 户 用 手机 查 
看 新 闻 其 实 更 多 的 是 浏览 新 闻 标 题 和 图 片 ， 因 此 没有 必要 在 首页 中 以 文字 
的 形式 显示 太 多 新 闻 的 详细 信息 。 


3.3| 基于 用 户 体 验 的 设计 策略 


用 户 体验 是 用 户 在 使 用 一 个 产品 与 服务 时 总 的 感受 与 印象 。 这 种 感受 
是 在 使 用 过 程 中 累积 形成 的 ， 包 括 用 户 的 心理 感受 和 物质 感受 。” 它 强调 
以 用 户 为 中 心 ， 把 目标 用 户 当 作 设 计 和 开发 活动 的 焦点 。 ”当然 用 户 体 
验 原 理 的 成 熟 与 推广 和 社会 的 发 展 密 不 可 分 。 











第 3 章 目标 与 蓝图 一 一 设计 策略 (S) 47 





48 


小 设计 大 思维 一 一 移动 应 用 界面 的 设计 万 法 与 实践 





多 3-10 数据 与 设计 的 关系 图 


随 厦 人 类 社会 生产 力 的 极 大 提高 ， 产 品 同 奈 化 现象 日 趋 严 重 ， 产品 的 ”了 
使 用 功能 已 经 远 远 不 能 满足 人 们 的 需求 。 特 别 是 人 类 社会 迈 入 信息 时 代 ， 
人 们 的 生活 方式 由 被 动 地 接收 信息 ， 变 为 主动 地 选择 信息 以 及 参与 信息 的 
生成 与 分 享 。 这 种 主动 体验 式 的 生活 方式 促进 了 体验 经 济 的 发 展 ， 那 些 具 
有 良好 用 户 体验 的 产品 与 服务 越 来 越 受 到 人 们 的 青睐 ， 正 如 美国 平面 设计 
师 协 会 AIGA 在 2005 年 阐述 的 观点 :“ 一 个 比 传 统 设 计 理 念 更 能 带 来 广阔 
发 展 空间 的 设计 方法 ， 即 努力 创造 一 种 优良 的 体验 ， 而 不 仅仅 是 产品 或 服 
务 本 身 。” “设计 的 原理 由 此 发 生 了 改变 。 因 此 ， 以 用 户 体 验 为 导向 的 设 
计策 略 已 成 为 品牌 产品 竞争 最 有 效 的 设计 方法 。 

著名 的 平 果 公 司 以 实施 用 户 体验 为 导 回 的 设计 策略 而 闻名 ， 有 具有 对 消费 
者 需求 超 乎 寻 章 的 洞察 力 ， 特 别 善于 发 现 顾客 潜在 的 需求 。 回 顾 乎 果 公 司 的 
发 展 历 程 ， 可 以 从 其 不 同 层 面 的 策略 调整 来 观察 苹果 的 创新 举措 。 

(1 ) 品牌 定位 

在 20 世纪 90 年 代 后 期 ， 当 乔布斯 重 返 侍 果 公司 后 ， 其 重新 评估 并 保 
留 了 10 个 具有 优质 潜力 的 产品 ， 优 化 了 公司 的 产品 线 ， 并 强调 公司 的 品 
牌 定 位 为 “Think Different”( 做 与 众 不 同 的 产品 )。 在 这 种 策略 思想 的 
指导 下 ， 圣 果 公 司 推出 了 两 个 革命 性 的 产品 : 具有 果冻 般 透 明 质 感 的 
iMac 和 黄 覆 了 整个 音乐 产业 的 iPod。iMac 鲜艳 的 色彩 ， 极 具 人 情 味 的 圆 
润 形态 改变 了 人 们 对 计算 机 冰冷 刻板 的 印象 ， 平 果 的 设计 品位 由 此 建立 
( 见 图 3-11 )。 





未 
的 
1 






The thrill of surfing. 
The agony of choosing a color. 


有 4 


3-11 平 果 iMac 系列 产品 
( 图 片 来 源 ; baike.baidu.com ) 
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(2 ) 产品 研发 

平 果 公 司 在 早期 产品 线 杂 乱 的 年 代 ， 多 数 产 品 都 是 在 技术 可 行 性 的 前 
提 下 来 设计 的 ， 后 期 平 果 强调 以 产品 使 用 的 便利 性 和 愉悦 感 为 导向 。 平 果 
的 团队 通过 观察 产品 的 消费 者 ， 分 析 消 费 者 的 行为 ， 由 此 开发 符合 市 场 洪 
在 需求 的 产品 ， 整 个 产品 的 研发 流程 也 变 成 了 : 设计 、 开 发 和 批量 生 
产 。 ”这 也 体现 了 设计 环节 在 苹果 公司 整个 产品 研发 流程 的 重要 性 ， 以 
设计 来 豫 动 产品 的 开发 和 生产 。 另 外 ， 平 果 与 微软 和 谷歌 公司 不 同 的 地 方 
是 设计 师 在 乎 果 公 司 可 以 主导 产品 研发 的 方向 并 能 直接 向 公司 高 层 进行 工 
作 汇 报 ， 这 大 大 加 强 了 设计 师 的 参与 感 ， 调 动 其 潜在 的 创新 能 力 ， 有 利于 
在 公司 内 部 形成 一 个 目 上 而 下 的 设计 文化 。 

全 中 过 全 

苇 果 的 设计 语言 可 以 定义 为 “less，but better”， 即 强调 产品 形态 的 
简洁 和 使 用 的 便利 性 ， 当 然 也 包括 对 新 型 材料 的 设计 研发 ， 这 些 都 表明 了 
平 果 公 司 给 消费 者 市 来 更 多 简单 易 用 产品 与 服务 的 决心 。 最 明显 的 例子 是 
苹果 i 系列 产品 ， 尤 其 是 iPhone 重新 定义 了 手机 。 它 四 周 的 金属 条 是 苹 
果 目 己 研 发 的 不 锈 钢 合金 ，5 售 于 标准 钢 的 强度 ， 它 们 先 经 过 锻造 而 后 效 
配 起 来 进行 注塑 一 一 这 是 苹果 产品 一 体 成 型 的 基本 元 素 ，” 也 体现 了 苹果 
的 设计 团队 对 材料 创造 性 的 运用 。iPhone 高 度 简洁 现代 的 外 观 ( 没有 键 
盘 ) 融合 多 氮 触 措 的 拉 术 ， 让 人 们 在 打 电 话 、 发 短信 、 浏 览 网 页 的 过 程 中 
体验 全 新 的 交互 模式 。 更 为 重要 的 是 ，iPhone 与 App ( 应 用 程序 ) 的 结合 
改变 了 人 们 的 生活 方式 。 用 户 使 用 iphone 花 在 游戏 、 地 图 、 微 博 和 阅读 
等 功能 上 的 总 时 间 ， 已 经 远 远 超出 移动 通 语 和 收发 短信 的 时 间 。iphone 
革命 性 的 外 观 、 操 探 方式 与 功能 为 平 果 公 司 扩 大 了 用 户 群 ， 用 户 在 经 历 了 
iPhone 使 用 体验 后 ， 也 更 愿意 去 购买 平 果 其 他 相关 产品 ( 见 图 3-12 )。 

( 4) 生产 与 市 场 营 销 

苹果 通过 与 原始 设计 制造 商 ( 0DM ) 进行 良好 的 合作 与 沟通 ， 以 保证 
平 果 公 司 可 以 将 大 部 分 的 精力 投入 到 特定 产品 和 材料 的 研发 当中 ， 让 产品 
能 够 具有 新 鲜 而 又 良好 的 用 户 体验 。 平 果 还 和 奉行 “服务 移行 ”的 原则 ， 即 
在 推广 产品 之 前 ， 它 们 基于 用 户 的 服务 就 已 经 开始 了 。 用 户 在 使 用 ipod 
时 可 以 轻松 地 从 订 unes 购买 自己 襄 爱 的 正版 音乐 ， 可 以 方便 地 通过 互联 


小 设计 大 思维 





移动 应 用 界面 的 设计 方法 与 实践 


网 找到 自己 想 要 的 信息 。 硬 件 与 软件 的 结合 ， 让 苹果 的 产品 更 具 市 场 竞争 7 
力 ， 也 让 用 户 享有 多 维度 的 良好 体验 。 < 











3-12 ”苹果 iphonel 与 App 世界 
( 图 片 来 源 : baike.baidu.com ) 


平 果 直 彰 店 ( Apple Store ) 作为 平 果 产 品 的 销售 终端 ， 现 在 在 很 多 
城市 已 经 成 为 当地 的 新 地 标 。 苹 果 直 营 店 特 挟 在 于 : 山 一 切 都 是 为 顾客 
提供 体验 ， 顾 客 在 平 果 直 萌 店 里 购买 产品 ， 可 以 在 员工 的 指引 下 亲 喘 体验 
产品 ， 这 加 深 了 来 访 者 对 乎 果 的 认 知 与 亲切 感 ; @ 友好 的 文化 ， 即 使 顾 
客 不 购买 任何 产品 和 参加 任何 活动 ， 也 可 以 在 乎 果 直 和 营 店 用 体验 设备 玩 小 
游戏 ， 放 松 自己 。 

(5 ) 产品 策略 

平 果 有 的 产品 策略 强调 以 用 户 需 求 为 中 心 ， 这 种 需求 是 用 户 对 产品 与 服 
务 的 期 望 值 ， 它 建立 在 用 户 对 产品 已 有 体验 和 印象 基础 上 。 例 如 ，ipod 
作为 平 果 公司 生命 力 最 持久 的 系列 产品 ， 除 了 本 映 所 具有 的 优质 性 能 
服务 内 容 ， 其 产品 线 也 经 过 了 续 密 的 战略 布局 。 针 对 各 种 用 户 的 需求 ， 
ipod 推出 了 大 容量 、 高 品质 ( Classic )， 低 价 、 便 扒 与 时 尚 ( Nano 和 
Shuffle )， 上 网 娱乐 ( Touch ) 系列 产品 ( 见 图 3-13 )。 特 别 是 ipod 
Touch， 它 被 看 作 是 没有 电话 功能 的 iPhone， 和 iphone 相 比 ，iPod Touch 
价格 低廉 许多 ， 在 具备 传统 iPod 首 乐 功能 的 基础 上 ， 还 可 以 运行 大 多 数 
App Store 上 的 各 种 应 用 ， 极 大 地 增强 了 原 有 iPod 系列 产品 的 游戏 娱乐 属 
性 ， 这 满足 了 部 分 用 户 低 价 格 、 高 娱乐 的 心理 需求 。 另 外 ，ipod 系列 产 
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品 还 能 与 iPhone 和 i0S 实现 完美 过 渡 和 和 有效 对 接 ， 这 体现 了 平 果 公 司 远 
见 的 战略 思维 。 






0 9 ‘ | 
be 和 吕 i, Ge 一 BJrstins 
>) “ 马 Cob 一 ee 9 
ks 
YA 人 








图 3-13 平 果 iPod 系列 产品 
( 图 片 来 源 ， baike.baidu.com ) 


iPhone 和 ipad 作为 苹果 公司 的 两 款 主 力 产 品 ， 其 外 观 设 计 的 细 市 加 
上 让 用 户 感 竞 恨 好 的 体验 直接 车 用 了 人 们 对 手机 和 计算 机 原 有 的 认识 。 
它们 通过 定期 推出 性 能 更 优 、 体 验 更 好 的 系列 产品 ， 以 满足 用 户 不 断 提 
高 的 体验 需求 ， 并 保证 行业 的 领先 地 位 。 此 外 ， 与 iPhone 和 ipad 相 融 
应 用 程序 在 线 商店 ， 成 为 了 苹果 式 生 态 圈 的 核心 。9 
App Store 作为 一 个 提供 海量 应 用 程序 的 线 上 平台， 吸引 了 无 数 开 发 者 
和 消费 者 的 关注 。 

(67 是 本 与 于 

企业 的 管理 与 领导 力 是 设计 策略 制定 和 有 效 执 行 0 Re 业 的 
管理 层 应 该 对 设计 有 深刻 认识 、 具 有 远见 的 设计 战略 思维 ， 以 乔布斯 为 核 
心 的 前 苹果 公司 管理 层 就 生动 地 体现 了 这 一 所。 

(1 理解 设计 ， 重 视 用 户 体 验 。 平 果 管 理 层 认 为 设计 的 价值 是 为 消费 
者 提供 一 流 的 软 硬 件 体验 和 外 形 美观 的 产品 。 因 此 他 们 强调 对 细 市 的 严格 
把 控 ， 这 也 激发 了 羡 果 设计 团队 表现 出 最 好 的 一 面 。 





后 STEVE JOBS [Jj. 第 一 周 经 周刊 ， 2011 增刊 。 
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@) 强大 的 资源 整合 与 执行 能 力 。 苹 果 管 理 层 牢固 的 领导 地 位 和 强大 
的 执行 能 力 ， 让 其 具有 独一无二 的 资源 控制 和 整合 能 力 。 一 旦 明确 了 公司 
的 产品 设计 策略 ， 从 产品 的 设计 研发 、 生 产 到 和 销售， 都 会 集中 公司 的 优势 
资源 予以 保障 ， 这 为 苹果 产品 和 功能 的 良好 品质 竟 定 了 坚实 的 基础 。 

(3) 敏锐 的 观 罕 能力。 苹果 管理 层 能 够 敏锐 地 捕捉 到 消费 者 潜在 需求 
以 及 把 握 产 品 面 世 时 机 ， 这 为 苹果 公司 的 设计 策略 的 制定 提供 了 强大 的 智 
力 文 持 。 例 如 ， 针 对 盗版 音乐 因为 音质 不 佳 或 者 用 户 下 载 不 到 自己 想 要 的 
歌曲 而 心烦 意 乱 的 现象 ， 平 果 给 消费 者 市 来 了 iTunes， 它 改变 了 人 们 接 
触 音 乐 、 购 买 音乐 、 收 藏 音 乐 的 方式 。ipod 产品 的 推出 让 盗版 音乐 变 得 
越 来 越 难 生存 ， 也 为 在 线 付费 音乐 提供 了 更 好 的 视听 体验 ， 促 进 了 整个 音 
乐 产业 的 良性 发 展 。 

从 以 上 分 析 中 不 难看 出 ， 蔷 果 公 司 围 绕 基 于 用 户 体验 的 设计 策略 在 各 
个 层面 得 到 了 有 效 的 应 用 ， 在 其 企业 内 部 形成 了 统一 的 苹果 设计 策略 一 一 
发 现 用 户 潜在 需求 ， 设 计 良 好 用 户 体验 ( 见 图 3-14 )。 苹 果 公 司 在 这 种 文 
化 氛围 下 推出 的 一 个 又 一 个 成 功 且 具有 其 覆 意义 的 产品 ， 证 明了 那些 具有 
良好 用 户 体验 的 设计 产品 比 仪 赁 科技 本 身 之 力 取胜 的 产品 更 具 吸 引力 ， 同 
时 也 改变 了 消费 者 在 数字 化 的 日 常生 活 中 与 科技 互动 的 方式 。 

销售 音乐 和 应 用 程序 + 运营 平台 的 报酬 





管理 与 领导 力 品牌 战略 


发 现 用 户 潜在 需求 


设计 良好 用 户 体验 


生产 与 市 场 销 售 设计 理念 





软件 + 硬件 + 服务 


3-14 平 果 公司 设计 策略 
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另外 ， 平 果 将 软 硬 件 和 服务 捆绑 在 一 起 设计 生产 并 销售 ， 为 它 自己 创 
造 了 两 种 鱼 利 模式 ， 一 种 是 通过 销售 硬件 产品 获得 一 次 性 的 高 额 利 油 ， 这 
是 平 果 目前 主要 的 利润 来 产 ; 另 一 种 是 靠 卖 音乐 和 应 用 程序 来 获取 重复 性 
购买 的 持续 利润 ， 以 及 获得 运营 平台 的 报酬 。 这 种 模式 会 相互 加 强 ， 形 成 
良性 循环 ， 也 为 其 他 企业 提供 了 值得 借鉴 的 经 营 方式 。 ” 


34 不 同 生命 周期 的 设计 末 上 略 


产品 生命 周期 ( Product Life Cycle，PLC ) 是 指 产 品 从 最 开始 进入 市 
场 到 最 终 退 出 市 场 的 整个 过 程 。 这 个 过 程 将 产品 视 作 具 有 生命 的 个 体 ， 要 
经 历 形成 、 成 长 、 成 熟 、 豪 退 的 周期 。 产 品 生命 周期 理论 最 早 由 美国 经 济 
学 家 雷 蒙 德 : 弗 农 ( Raymond Vernon ) 于 1966 年 在 其 《产品 周期 中 的 国际 
投资 与 国际 贸易 》 一 文中 提出 ， 产 品 生命 周期 主要 分 为 开发 期 、 进 入 期 、 
成 长 期 、 成 熟 期 、 衰 退 期 5 阶段 。 

设计 策略 制定 应 根据 其 生命 周期 的 不 同 阶段 ( 见 图 3-15 )， 评 估 应 用 
的 侧重 点 。 应 用 设计 策略 制定 不 仅 需 要 前 期 大 量 数 据 的 支撑 ， 还 要 用 发 展 
的 眼光 把 握 整 个 产品 ， 根 据 产品 的 长 远 目 标 制定 核心 策略 。 

市 场 占有 率 





开发 期 : 进入 期 : : : : A 
测试 。 版 本 | 和 迭代 1.…… 迭代 N 重新 开发 
图 3-15 ”产品 生命 周期 的 不 同 阶段 


(D 开发 期 : 包括 产品 前 期 用 户 研 究 、 移 动 应 用 设计 ( 交互 设计 、 视 
区 设计 ) 、 产 品 开 发 三 个 重要 模块 。 此 时 的 产品 还 未 投放 市 场 ， 没 有 经 过 
市 场 的 验证 。 因 此 在 这 一 阶段 的 策略 应 尽量 做 减法 ， 集 中 资产 开发 应 用 的 
核心 需求。 
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@ 进入 期 将 新 的 产品 初次 投放 市 场 的 测试 阶段 。 由 于 用 户 对 应 用 7 
缺乏 了 解 和 信任 ， 因 此 用 户 下 载 、 购 买 及 使 用 产品 的 概率 较 低 。 这 一 时 期 ”> 
的 应 用 效益 增长 缓慢 ， 但 竞争 相对 缓和 ， 市 场 上 的 同 质 化 产品 较 少 。 开 发 
团队 要 进行 适当 的 宣传 及 推广 活动 ， 同 时 也 要 将 产品 的 成 本 降 到 最 低 ， 从 
而 规避 产品 失败 的 风险 。 

(3) 成 长 期 : 一 旦 产品 被 一 定数 量 的 用 户 接受 并 认可 ， 产 品 就 进入 了 
成 长 期 。 这 一 时 期 的 用 户 与 产品 利润 迅速 增长 ， 用 户 需 求 也 不 断 增多 。 与 
此 同时 ， 竞 争 对 手 纷纷 进入 市 场 参 与 竞争 ， 容 易 出 现 产 品 严 重 的 同 质 化 现 
象 ， 一 些 产 品 会 在 竞争 中 遭 到 淘汰 。 开 发 团队 在 保证 产品 能 满足 大 部 分 用 
户 需 求 的 基础 上 ， 加 入 更 多 符合 用 户 需 求 的 其 他 功能 ， 以 及 适当 增加 产品 
运营 的 内 容 。 

@ 成 熟 期 : 随 着 用 户 数量 增多 ， 市 场 需求 趋 于 饱和 后 ， 产 品 进 入 了 
成 丈 期 。 由 于 市 场 竞 争 激 烈 以 及 更 新 换代 速度 较 快 的 特点 ， 其 成 束 期 一 般 
较 短 。 因 此 ， 开 发 团队 要 尽 可 能 满足 各 个 层级 用 户 的 一 些 个 性 化 需求 ， 防 
止 应 用 快速 进入 衰退 期 。 

@ 衰退 期 : 产品 进入 衰退 期 的 原因 主要 是 产品 无 法 适应 市 场 及 其 用 
户 需求 的 增长 ， 市 场 上 出 现 了 更 好 的 替代 品 。 它 是 产品 成 熟 期 没有 被 顺利 
延长 ， 从 而 导致 应 用 不 能 再 次 进入 成 长 期 而 逐渐 消亡 的 结果 。 具 体 表 现 为 
用 户 数 量 逐 渐 下 降 ， 中 间 用 户 流失 率 增 大 。 因 此 ， 在 这 个 时 期 需要 开发 团 
队 调 整 应 用 整体 思路 ， 有 吸取 应 用 失败 的 教训 ， 重 新 回 到 应 用 的 开发 期 。 

根据 经 济 学 理论 ， 消 费 者 的 需求 层级 越 高 ， 他 们 就 越 不 容易 被 满足 。 
因此 ， 产 品 需要 在 体现 用 户 及 产品 自身 价值 的 前 提 下 ， 不 断 地 迭代 创新 。 
与 此 同时 ， 每 一 时 期 的 策略 内 容 可 以 根据 市 场 、 应 用 细节 和 目标 用 户 的 需 
求 等 动态 因素 进行 调整 。 


了 人 小结 


用 户 体验 原理 与 产品 设计 策略 观念 都 兴起 于 后 工业 化 时 代 。 后 工业 化 
时 代 ， 人 们 的 消费 意识 发 生 了 重大 变革 ， 产 品 的 情感 化 、 多 样 化 被 日 益 强 
调 ， 而 这 些 因 素 造 成 了 设计 的 地 位 得 到 显著 的 提升 。 正 如 美国 《商业 周 
刊 》 编 辑 布鲁斯 ， 纳 斯 鲍 姆 ( Bruce Nussbaum ) 曾 说 :“ 在 20 世纪 90 年 
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中 |.- 宇 代 ， 当 人 们 谈论 创新 时 其 实 就 意味 着 技术 ， 而 近 十 年 来 ， 当 人 们 谈 及 创新 
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时 其 实则 意味 看 设计 。 
设计 也 可 以 作为 一 种 有 效 的 指导 方针 ， 用 设计 策略 来 驱动 产品 的 开 
发 、 生 产 和 宵 售 ， 从 而 市 动 技术 的 提高 ， 提 升 产品 品牌 的 价值 。 与 此 同 


竞争 产品 ， 根 据 实 际 问题 ， 合 理 地 运用 各 种 策略 方法 ， 结 合理 性 的 数据 尤 
其 是 大 数据 分 析 ， 对 用 户 、 市 场 和 竞争 者 展开 研究 ， 得 出 最 终 的 设计 概念 
并 加 以 验证 。 

互联 网 经 济 强 调 设 计 的 理念 从 以 物 的 形态 为 中 心 转 回 以 人 的 体验 为 中 
心 。 企 业 产 品 与 服务 的 目标 应 该 是 给 用 户 提供 美好 的 体验 。 因 此 ， 用 户 是 
移动 应 用 研发 的 关键 因素 ， 企 业 需 要 以 用 户 的 需求 为 基础 ， 给 用 户 带 来 良 
好 的 产品 与 服务 。 移 动 应 用 界面 设计 需要 在 应 用 设计 策略 的 指导 下 对 目标 
用 户 展开 研究 ， 为 后 续 的 界面 交互 及 视觉 设计 提供 准确 的 用 户 模型 及 其 任 
NT 
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核心 王 情 感 一 一 用 户 及 其 


任务 模型 ( UT ) 
4.1 | 移动 用 户 的 需求 层次 


(1 ) 需求 层次 

提 人 到 需求 ， 人 们 会 将 其 与 用 户 的 直观 需要 、 偏 好 、 愿 望 等 词汇 联系 起 
来 。 不 仅 如 此 ， 需 求 一 般 表 现 得 非常 理性 、 具 体 和 实际 。 了 解 用 户 的 需 
求 ， 能 从 根本 上 熟悉 用 户 的 动因 ， 进 而 通过 设计 打动 用 户 。 用 户 需 求 多 呈 
现 复 杂 、 综 合 和 多 维 的 特点 ， 是 心理 学 、 人 类 学 等 多 个 学 科研 究 的 对 象 。 
在 了 解 用 户 需 求 之 后 ， 要 尽 可 能 满足 他 们 的 需求 。 

人 的 基本 需求 层次 理论 最 早 由 美国 心理 学 家 亚 们 林 罕 H， 马 斯 阁 
( Abraham H. Maslow ) “于 1943 年 提出 。 该 理论 结构 呈 三 角形 并 由 低 到 
高 之 级 上 升 来 表现 人 基本 需求 的 程度 。 它 们 是 : 生理 需要 、 安 全 需要 、 社 
交 需 要 、 尊 重 需 要 、 自 我 实现 的 需要 。 当 人 们 满足 了 一 级 需要 后 ， 会 不 断 
追求 更 高 级 的 需要 。 

其 中 ， 生 理 需 要 是 人 们 最 原始 的 基本 需求 ; 安全 需要 是 人 们 疯 望 得 到 
各 方面 保障 的 需求 ; 社交 需要 是 人 们 对 于 归属 和 爱 的 需求 ， 它 比 生 理 和 安 
全 需要 更 细腻 、 更 具有 情感 属性 ; 尊重 需要 包 后 自我 尊重 、 自 我 评价 以 及 
尊重 询 人 ， 基 本 的 尊重 需求 被 满足 就 能 产生 自我 推动 力 ; 自我 实现 的 需要 
是 人 们 意识 中 最 高 等 级 的 需求 ， 满 足 它 需要 来 自 工作 、 生 活 、 创 造 力 、 自 
觉 性 、 解 决 问 题 的 能 力 等 各 方面 因素 的 文 掺 。 生 理 需 要 与 安全 需要 属于 需 
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求 的 初级 阶段 ， 社 交 需 要 与 尊重 需要 属于 需求 的 中 级 阶段 ， 而 自我 实现 的 
需要 属于 需求 的 高 级 阶段 。 

( 2 ) 移动 应 用 用 户 的 需求 层次 

将 马 斯 洛 需求 层次 理论 运用 到 移动 应 用 中 ， 生 理 需 要 涉及 用 户 的 感 育 感 
受 ， 如 视 涡 、 昕 咒 、 哩 总 、 触 总 等 ; 安全 需要 是 使 用 应 用 时 的 需求 体验 ， 涉 
及 应 用 的 可 用 性 和 易 用 性 的 研究 ， 社 交 需 要 是 应 用 在 用 户 情感 上 的 提升 ， 尊 
重 需 要 是 关于 用 户 社会 存在 和 成 就 感 的 设计 ; 自我 实现 的 需要 主要 体现 在 个 
性 化 层面 ， 满 足 自我 实现 的 需要 。 正 如 艾 伦 . 库 伯 ( Alan Cooper ) “通过 唐 
纳 德 A， 详 曼 ( Donald A. Norman ) 需求 层次 理论 ， 总 结 出 的 三 个 用 户 目 标 
层次 : 体验 目标 、 最 终 目 标 、 人 生 目 标 。 体 验 目 标 体现 用 户 使 用 应 用 时 的 期 
望 值 ， 是 一 种 表象 的 用 户 体验 ， 如 感到 很 放松 ， 很 有 乐趣 等 。 最 终 目标 是 用 
户 使 用 应 用 时 的 操作 动机 ， 是 影响 移动 应 用 用 户 体验 的 最 为 关键 的 因素 之 
一 。 用 户 在 使 用 应 用 前 会 对 操作 结果 产生 一 定 的 预期 ， 若 实际 结果 和 预期 结 
果 反 差 较 大 ， 则 会 使 用 户 产生 挫败 感 。 人 例如， 用户 进 行 某 项 操作 后 ， 知 应 用 
反馈 信息 显示 他 们 的 操作 无 用 ， 则 容易 引起 用 户 的 负面 情绪 。 人 生 目 标 是 高 
层次 的 用 户 目标 ， 是 用 户 对 于 产品 的 一 种 长 期 期 望 。 产 品 的 功能 和 服务 与 用 
户 的 人 生 目 标 越 契合 ， 越 容易 使 移动 应 用 形成 长 期 的 产品 拥护 者 。 因 此 ， 体 
验 目 标 、 最 终 目 标 与 人 生 目 标 也 是 由 初级 器 高 级 阶段 不 断 上 升 的 需求 层次 。 
移动 应 用 用 户 的 需求 层次 如 图 4-1 所 示 。 








4-1 移动 应 用 用 户 的 需求 层次 
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移动 应 用 要 在 保证 用 户 的 初级 与 中 级 需求 得 到 满足 的 前 提 下 ， 力 图 帮 
助 用 户 实现 自我 需求 。 只 有 这 样 ， 应 用 才 会 拥有 更 多 的 用 户 ， 用 户 的 忒 性 
会 得 到 加 强 。 基 于 用 户 需 求 的 具体 表现 就 是 用 户 模 型 。 通 过 对 用 户 需 来 
层次 的 分 析 ， 能 了 解 用 户 对 移动 应 用 的 期 望 层次 。 


4.2 | 移 荔 用 已 模 广 


(1 ) 用 户 模 型 

用 户 模型 又 称 为 用 户 的 心理 模型 ， 是 用 户 从 日 常 经 验 中 衍生 出 对 系统 
和 和 环境 的 印象 ， 有 反映 人 对 环境 的 整体 表征 。 对 用 户 模 型 的 研究 是 站 在 用 户 
的 角度 ， 发 掘 其 在 日 党 生活 中 的 潜在 需求 ， 以 协助 移动 应 用 的 产品 创新 和 
市 场 开 拓 。 

如 图 4-2 所 示 ， 用 户 认 知 系统 与 应 用 认 知 系统 呈现 一 个 循环 并 相互 
影响 的 信息 交换 过 程 。 在 通常 情况 下 ， 用 户 模 型 与 应 用 认 知 系统 中 的 设计 
师 模 型 、 技 术 模 型 均 有 和 较 大 差 寞 。 因 此 ， 对 用 户 模 型 进行 研究 能 使 设计 师 
更 加 了 解 用 户 的 心理 预期 ， 让 设计 师 模 型 及 最 终 的 设计 成 果 更 加 符合 用 户 
的 心理 状态 





洪 烷 证 到 





输入 ”输出 
用 户 的 认 知 系统 应 用 的 认 知 系统 


4-2 用 户 认 知 系统 与 应 用 认 知 系统 的 关系 
用 户 模 型 与 用 户 需求 层次 联系 紧密 ， 主 要 分 为 用 户 认 知 模型 、 行 为 模 
型 与 情感 模型 三 大 模块 ( 见 图 4-3 )。 认 知 模型 反映 用 户 面 对 应 用 内 容 时 
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所 进行 的 信息 加 工 过 程 ， 行 为 模型 反映 用 户 在 操作 应 用 时 的 有 具体 目标 和 行 
为 方式 ， 情 感 模型 反映 用 户 在 体验 产品 过 程 中 所 产生 的 一 系列 情感 因素 。 
用 户 模 型 的 具体 表现 形式 为 人 物 角 色 模 型 ， 而 在 设计 内 容 上 的 表现 形式 为 
任务 模型 。 任 务 模型 是 连接 用 户 模 型 与 界面 设 计 的 桥 染 ， 因 此 对 用 户 模型 
的 研究 是 移动 应 用 界面 设计 中 最 核心 的 内 容 。 





图 4-3 ”用户 模型 组 成 


(2 ) 设计 师 模 型 与 用 户 模型 的 匹配 

移动 应 用 育 后 存在 两 种 模型 : 设计 师 模型 与 技术 模型 。 设 计 师 模型 被 
尔 为 表现 模型 ， 指 用 户 使 用 产品 所 形成 的 关于 应 用 是 如 何 使 用 相 工 作 的 知 
识 。 拷 术 模 型 被 称 为 实现 模型 ， 指 应 用 具体 工作 的 模型 ， 如 代码 编写 、 程 
序 运行 等 。 设 计 师 模型 作为 用 户 与 技术 模型 之 间 的 桥梁 ， 是 衔接 用 户 模 型 
与 技术 模型 的 关键 因素 。 设 计 师 模型 越 接 近 用 户 模 型 ， 用 户 的 操作 就 越 轻 
松 ; 而 设计 师 模型 越 接近 拉 术 模型 ， 越 容易 给 用 户 造成 记忆 负担 ， 并 最 终 
形成 不 恨 的 用 户 体验 。 

设计 师 模 型 与 用 户 模型 的 匹配 主要 涉及 设计 师 知 识 与 用 户 知 识 的 匹配 
过 程 。 知 识 在 汉语 中 指 学 术 、 文 化 或 学 问 ， 而 碳 文 单词 knowledge 的 含义 
指 人 们 在 实 足 中 获得 的 认识 和 经 验 。 知 识 加 工 观 点 认为 ， 知 识 可 以 分 为 两 
大 类 ， 陈述 性 知识 ( declarative knowledge ) 和 程序 性 知识 ( procedural 
knowledge )。 陈述 性 知识 是 用 语言 或 视觉 化 形式 摘 述 关于 事实 的 知识 形 
态 ， 程 序 性 知识 是 潜 洗 在 行动 到 后 难于 用 语言 表达 的 知识 形态 。 它 们 分 别 
相当 于 英 籍 犹太 裔 物理 化 学 家 和 哲学 家 Michael1 Polanyi” 提 到 的 显 性 知 
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识 ( explicit knowledge ) 口 与 隐 性 知识 ( tac 计 knowledge ) 9。 隐 性 知识 
存在 于 个 人 头脑 中 ， 属 于 在 茶 个 特定 环境 下 难以 正规 化 和 沟通 的 知识 。 它 
源 于 经 验 ， 经 验 来 产 于 个 体 对 外 部 世界 的 判断 和 感知 。 隐 性 知识 是 显 性 知 
识 的 前 提 和 基础 ， 显 性 知识 是 隐 性 知识 的 表象 和 成 果 。 在 人 类 的 知识 结构 
中 ， 人 们 所 能 感受 到 的 显 性 知识 只 是 冰山 一 角 ， 而 隐 性 知识 占据 了 绝 大 部 
分 ， 它 对 于 知识 的 转化 和 创新 意义 重大 。 因 此 ， 人 研究 人 员 要 在 用 户 模 型 研 
究 中 挖 所 用 户 的 隐 性 知识 ， 深 层 了解 用 户 的 想法 、 行 为 动机 相 洪 在 需 水 ， 
使 设计 师 模 型 与 用 户 模 型 尽量 保持 一 致 。 

设计 模型 是 对 设计 师 的 知识 进行 摘 述 和 构建 的 模型 ， 用 户 模型 是 对 用 户 
使 用 产品 累积 知识 的 描述 和 构建 的 模型 。” 基 于 移动 应 用 的 设计 模型 涉及 设 
计 过 程 中 的 商业 模式 与 设计 策略 知识 、 界 面 交 互 及 视觉 设计 知识 、 组 织 知 识 
的 获取 和 建 模 以 及 团队 成 员 系统 的 原理 、 规 则 和 方法 ;用户 模型 涉及 用 户 对 
应 用 的 理解 与 操作 ， 涉 及 用 户 心 理 模 型 和 用 户 知 识 的 获取 和 建 模 。 移 动 应 用 
的 设计 师 知识 与 用 户 知识 模型 如 图 4-4 所 示 。 




















设计 师 





移动 应 用 


接近 接近 


用 户 
实际 模型 (后 合 程序 等 ) 用 户 模型 (心理 、 情 感 等 ) 


难 易 
理解 


4-4 ”移动 应 用 的 设计 师 知 识 与 用 户 知 识 模型 


名 显 性 知识 是 基于 社会 化 层面 并 能 被 人 类 以 一 定 符 码 系统 ( 如 语言 、 书 面 文字 、 图 表 、 数 学 
公式 、 说 明 书 、 网 络 等 符号 形式 ) 加 以 和 表述 的 知识 形态 。 显 性 知识 不 仅 容易 获取 ， 还 可 以 被 传播 和 编 
但 5 一 一 笔者 注 

名 隐 性 知识 是 人 类 拥有 却 无 法 轻易 的 述 的 无 形 知 识 ， 如 洞察 力 、 灵 感 、 视 觉 感受 、 经 验 等 。 
这 类 知识 比较 主观 、 抽 象 和 模糊 ， 难 以 形式 化 、 编 码 和 交流 。 所 者 注 
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4.2.1 认 知 模 全 


设计 师 探 索 移 动用 户 的 认 知 模型 是 为 了 更 加 理性 、 深 入 、 准 确 地 研究 
用 户 的 思维 和 模式， 构建 出 一 个 移动 用 户 的 认 知 模型 ， 并 将 其 运用 在 设计 之 
中 。 认 知 是 人 们 面 对 事 物 的 一 种 抽象 或 具 se 
的 认 知 模型 就 是 有 关 用 户 感 总、 知 咒 、 记 忆 以 及 决策 的 信息 加 工 过 程 ， 包 
售 信 息 的 输入 、 编 码 、 存 储 及 提取 的 内 容 。 这 个 概念 tn 
[年 仙 和 于 二 于 和 6 

威 尔 斯 ( Wickens ) “于 1992 年 提出 了 人 类 信息 加 工 模型 ( Human 
Model of Information Processing )。 他 认为 刺激 是 信息 加 工 的 起 点 ， 反 
应 的 执行 是 信息 加 工 的 终点 ， 感 竞 、 知 况 、 记 忆 、 决 策 等 分 别 代 表 了 人 类 
言 轧 加 工 的 不 同 阶段 ( 见 图 4-5 )。 


本 


知觉 决策 和 反应 | 和 出 反应 的 执行 
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图 4-5 用户 的 信息 加 工 模 型 


“我 感 迪 很 好 ”我 感 欧 棱 极 了 人” “我 感 况 这 个 东西 真 好 看 “我 感到 很 
伤心 "。" 感 苑 ” 这 个 词 在 平日 中 出 现 的 频率 颇 高 ， 这 主要 是 因为 感 药 不 需 
要 人 们 做 出 理性 的 思 芳 ， 对 事物 的 直观 感 党 、 第 一 反应 等 都 是 感 况 的 一 种 
体现 。 

从 理性 的 层 血 分 析 ， 感 党 是 大 脑 目 下 而 上 的 信息 处 理 过 程 ， 它 主要 
处 理 感官 的 原始 素材 。 例 如 ， 人 在 视 党 层面 上 人 处 理 的 是 视网膜 上 有 的 原 
台 影 像 ， 视 网 膜 上 各 个 位 置 的 视觉 接收 费 会 依照 刺激 的 差异 而 产生 强 
弱 不 等 的 反应 。 视 项 、 昕 苋 、 触 项、 味 况 、 哩 况 、 痛 疯 等 都 属于 感 帝 
的 范 颇 。 

相 较 于 甘 急 不 定 的 感觉 ， 若 园 则 显得 里 加 理性 和 高 级 。 例 如 ， 我 
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知道 他 会 来 " “我 学 过 这 个 知识 ， 所 以 我 确信 结果 是 这 样 ” “我 会 玩 这 
A 

知觉 是 大 脑 自 上 而 下 处 理 信 息 的 过 程 ， 强 调 认 知 的 功能 如 何 通过 注 
意 、 记 忆 、 预 期 、 经 验 和 知识 等 高 级 加 工 的 机 制 ， 以 表现 出 目标 导向 的 获 
取信 息 行 为 。 设 计 师 可 以 直接 从 环境 中 的 丰富 信息 抽取 出 与 深度 、 大 小 和 
动作 有 关 的 用 户 知 觉 信息 。 因 此 ， 知 觉 受 到 环境 和 人 们 内 在 感觉 和 经 验 的 
影响 。 

感觉 是 神经 学 、 脑 科学 等 研究 的 对 象 ， 而 知觉 是 心理 学 、 认 知心 理学 
研究 的 对 象 。 在 人 们 的 日 常生 活 中 ， 感 觉 与 知 帝 活动 以 持续 交叉 的 形式 而 
存在 ( 见 图 4-6 )。 人 们 首先 会 利用 感觉 来 处 理 信息 ， 当 过 到 识别 困难 
时 ， 会 使 用 知觉 来 帮助 做 出 判断 。 人 们 通常 按照 主观 的 意识 选择 少数 的 事 
物 作 为 知觉 对 象 。 例 如 ， 在 单一 或 静止 的 国 面 中 ， 鲜 艳 的 或 呈 运 动 趋势 排 
列 样式 的 事物 一 般 会 成 为 用 户 的 知觉 对 象 。 





感觉 的 表现 知觉 的 表现 


遇 到 困难 注意 、 记 忆 、 


好 大 一 棵 树 感觉 的 深入 | i 0 i 经 验 、 知识 加 工 这 是 一 棵 桑树 

一 ! 一 人 、、 

这 是 一 棵 树 ”这 是 什么 树 ? 这 是 一 棵 苹果 树 
图 4-6 ”感觉 与 知觉 ( 以 树 为 例 ) 


在 设计 活动 中 ， 感 觉 和 知觉 的 差异 性 使 人 们 了 解 到 : 移动 应 用 不 仅 要 
在 第 一 时 间 从 视觉 、 昕 帝 、 触 竞 等 感官 上 豚 引 用户， 还 要 根据 目标 用 户 的 
经 验 、 知 识 、 记 忆 等 各 个 方面 的 实际 情况 进行 设计 工作 。 只 有 这 样 ， 产 品 
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才 有 可 能 形成 良好 的 用 户 体验 ， 满 足 用 户 的 需求 。 

(2) 台 时 记忆 与 人 也 忆 

提 到 “记忆 ”， 大 多 数 人 都 会 产生 各 种 各 样 复杂 的 情结。 例如 ， 那 段 
痛苦 的 记忆 、 一 直 以 来 开心 的 记忆 、 难 以 忘怀 的 记忆 。 无 论 人 们 对 于 记忆 
的 印象 如 何 ， 记 忆 总 是 挥 之 不 去 。 通 过 记忆 ， 人 们 可 以 记 住 重要 、 关 键 的 
事物 ， 并 由 此 帮助 自己 取得 成 功 。 对 于 学 生 而 言 ， 强 化 记忆 和 能 使 他 们 在 考 
试 中 取得 更 加 优异 的 成 绩 。 

从 科学 的 角度 了 解 用 户 记 忆 的 规律 能 帮助 设计 工作 者 进行 更 加 符合 
用 户 认 知 习惯 的 设计 。 例 如 ， 在 一 个 界面 中 ， 用 户 究 竟 能 记 住 多 少 信 
息 ? 用 户 能 记 住 自己 的 用 户 名 和 密码 吗 ? 用 户 下 一 次 进入 应 用 会 记得 怎 
么 操作 吗 ? 

一 般 而 言 ， 人 们 是 先 通过 知觉 从 外 界 获 取信 息 ， 再 以 记忆 的 形式 储存 
下 来 。 任 何 一 个 心理 活动 和 现象 ， 从 认 知 到 酝酿 情绪 、 情 感 直 至 形成 个 性 
都 离 不 开 记忆 的 参与 。 记 忆 是 过 去 的 经 历 在 人 脑 中 的 反映 ， 并 使 人 们 过 去 
的 心理 活动 与 现在 和 未 来 联 成 一 个 整体 。 

记忆 的 过 程 包括 三 个 基本 的 认 知 操作 : 编码 、 存 储 和 提取 。 ”编码 是 
主体 将 感知 到 的 信息 有 意 或 无 意 转 变 为 大 脑 可 以 接受 形式 的 过 程 ， 存 储 是 
主体 将 信息 以 一 定 的 方式 保存 在 大 脑 中 ; 提取 是 解码 信息 的 过 程 。 解 码 是 
主体 对 来 自 外 部 信息 的 重新 提取 并 作为 认 知 或 思维 活动 的 材料 过 程 。 表 征 
的 信息 可 以 是 概念 也 可 以 是 形象 ， 都 是 经 过 归纳 、 概 插 和 抽象 化 的 处 理 ， 
最 终 形成 概念 原型 。 因 此 ， 当 用 户 回 忆 某 个 移动 应 用 的 界面 时 ， 他 们 不 会 
回忆 起 所 有 的 细节 ， 而 是 事物 的 大 概 原型 。 

此 外 ， 用 户 一 般 会 经 历 感觉 记忆 到 短 时 记忆 再 到 长 时 记忆 的 过 程 ( 见 
4-7 )。 感 觉 记 忆 是 一 个 较 大 容量 的 存储 系统 ， 它 的 信息 停留 时 间 很 
短 ， 视 觉 信息 大 约 能 持续 0.5S， 而 听觉 信息 大 约 能 持续 5~10s， 短 时 记 
忆 存 储 信息 的 容量 较 小 ， 但 信息 停留 时 间 比 感觉 记忆 长 ， 大 约 在 30s 之 内 
衰退 ; 长 时 记忆 则 有 具有 较 大 容量 的 存储 系统 ， 信 息 不 易 丢 失 。 这 三 类 记忆 
也 解释 了 人 类 记忆 存储 信息 的 过 程 。 人 脑 受 到 外 部 环境 的 刺激 后 进入 感觉 
记忆 ， 部 分 信息 随即 传递 到 短 时 记忆 ， 而 在 短 时 记忆 中 得 到 “复述 ”的 信 
息 能 转移 到 长 时 记忆 里 。 正 如 德国 心理 学 家 赫 尔 曼 ， 艾 宾 浩 斯 ( Hermann 


Ebbinghaus ) 通过 实验 总 结 有 关 人 类 遗 饼 曲线 的 理论 增加 学 习 次 数 能 提 
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高 人 们 的 记忆 力 ， 时 间 间 隔 与 学 习 数 量 是 影响 记忆 的 重要 因素 。 


感觉 记忆 
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图 4-7 用户 记忆 的 过 程 

如 今 ， 电 视 广 告 、 网 页 广告 、 手 机 广告 、 平 面 广 告 等 不 停 地 干扰 着 人 们 
的 生活 ， 通过 视觉 、 听 觉 等 多 感官 的 刺激 将 营销 内 容 慢 慢 植 入 到 大 脑 中 。 
尽管 会 引起 反感 ， 但 人 们 还 是 会 在 无 形 中 记 住 这 些 品 牌 、 广 告 内 容 等 。 设 计 
师 应 该 思考 的 是 如 何 将 复述 的 内 容 更 加 贴 合 用 户 的 认 知 ， 如 何以 一 种 有 意 
义 、 朋 深度 的 形式 复述 信息 。 将 用 户 比 较 喜 爱 、 欣 赏 、 不 反感 的 信息 进行 复 
述 ， 则 更 容易 将 短 时 记忆 转化 为 长 时 记忆 。 

美国 心理 学 家 米 勒 在 其 论文 《神奇 的 数字 7+2》 中 提出 用 户 的 记忆 和 存 
储量 很 小 ， 只 能 存储 5~7 个 有 序 模块 ， 并 且 存 储 的 时 间 相 对 较 短 。 因 
此 ， 设 计 师 要 将 移动 应 用 的 主要 功能 、 功 能 操作 、 选 项 选择 等 信息 控制 在 
用 户 的 正常 记忆 汇 围 之 内 ， 不 能 让 信息 过 度 超载 ， 还 要 将 重要 信息 以 用 户 
了 更易 接受 的 表现 形式 进行 必要 重复 ， 这 样 才能 使 人 们 将 短 时 记忆 顺利 转化 
为 长 时 记忆 ， 从 而 记 住 应 用 的 重要 特性 和 使 用 方法 。 记 忆 在 用 户 体 验 中 的 


位 置 如 图 4-8 所 示 。 
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图 4-8 记忆 在 用 户 体验 中 的 位 置 
( 3 ) 决策 人 人 
决策 是 用 户 面 怖 两 个 以 上 的 选择 时 ， 通 过 对 事物 的 认 知 、 经 验 和 知识 
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进行 选择 的 过 程 。 决 策 的 前 提 是 作出 判断 ， 用 户 通 前 认 为 能 获得 满意 结 宁 
的 决策 就 是 好 的 决策 或 成 功 的 决策 。 当 用 户 接收 到 各 种 各 样 的 刺激 时 ， 大 
脑 就 会 去 努力 理解 感知 颖 官 给 它 的 信号 。 这 些 信号 通过 中 枢 神 经 系统 变 成 
反应 ， 有 一 些 是 无 意识 的 物理 反应 。 

决策 可 以 分 为 选择 、 评 估 和 建构 三 种 类 型 。 “选择 决策 指 用 户 面 对 一 
组 明确 选项 时 必须 从 中 挑选 出 一 个 或 多 个 选项 。 评 们 决策 指 用 户 一 次 只 对 
一 个 选项 进行 价值 评 信 ， 它 会 影响 用 户 的 行为 和 其 预想 的 结果 。 建 构 决 策 
指 用 户 血 对 一 组 多 关 别 的 资产 时 需要 从 中 建构 出 一 个 最 满意 的 组 合 。 选 择 
决策 是 决策 行为 中 最 基本 的 类 型 ， 使 用 得 最 为 广泛 。 

用 户 认 知 能 影响 用 户 的 决策 。 针 对 移动 应 用 移动 性 的 特点 ， 用 户 在 面 
对 应 用 界面 时 的 决策 一 般 是 出 于 本 能 、 无 意识 或 以 往 的 经 验 知 识 来 进行 习 
惯性 的 操作 。 特 别 是 在 搭乘 公共 交通 工具 、 行 走 的 路 途中 以 及 等 竺 的 时 间 
中 ， 他 们 的 每 一 步 决 定 并 不 会 经 过 次 入 的 已 考 ， 因 此 用 户 布 望 应 用 系统 能 
将 复杂 的 任务 简单 化 ， 并 依靠 应 用 中 的 各 种 信息 提示 帮助 他 们 做 出 决定 和 
完成 复杂 的 任务 。 


4.2.2 ”行为 模型 


当 人 们 要 做 任何 一 件 事 情 时 ,， “行为 ”就 成 了 达成 目标 最 快捷 、 直 观 
的 姬 介 。 当 人 们 乘 电梯 到 达 家 门口 时 ， 会 从 包 里 掏 出 钥匙 ， 将 钥匙 插入 门 
上 的 钥匙 孔 ， 回 右 旋转 几 圈 后 推 开 门 进 屋 ; 当 人 们 在 路 边 等 竺 朋友 时 ， 会 
拿 起 手机 ， 用 石 手 大 拇指 点 开 音 乐 播 放 尼 ， 并 皇上 耳机 听 歌 。 

从 日 党 生活 中 的 种 种 案例 可 以 发 现 : 行为 是 用 户 决策 的 具体 表现 。 而 
本 万 所 说 的 行为 模型 主要 是 以 移动 用 户 作 为 主体 ， 研 究 他 们 为 了 达到 肝 种 
目的 而 进行 的 一 项 或 一 系列 动作 。 

下 面 来 看 看 不 同学 者 、 设 计 师 对 于 用 户 行为 的 研究 。 

和 谷 兰 埃 因 霍 芬 理工 大 学 (Technische University Eindhoven，TU/e) 教 授 
Kees Overbeeke “从 人 与 产品 进行 交互 的 角度 出 发 ， 将 人 的 能 力 分 为 三 个 
层级 : 认 知 能 力 、 知 觉 运动 能 力 与 情感 能 力 ， 即 认 知 、 动 作 与 情感 。 他 认 
为 自 刁 感应 中 的 用 户 动 作 (行为 ) 信息 是 最 为 重要 、 有 直接 的 信息 兰 ， 用 户 
情感 会 通过 行为 直接 表达 出 来 。 
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移动 应 用 界面 的 设计 方法 与 实践 


Alan Cooper 将 用 户 的 行为 目标 视 为 产品 研发 的 重要 人 参数， 设计 师 通 
过 它 考 虑 产品 的 功能 。 

Bonnie A. Nardi ”将 用 户 和 J 为 从 低 到 高 分 三 wR 和 (信守 
行为 ， 主 要 按照 用 户 对 于 行动 对 象 思考 度 友和 人 到 而 
列 的 。 例 如 ， 用 户 进 行 重复 、 无 意识 或 习惯 性 的 和 生动 均 被 称 为 操作 。 这 = 
个 层次 受到 条 件 、 目 标 和 动机 的 影响 。 

亚 伯 林 罕 H . 马 斯 洛 ( Abraham H. Maslow ) "将 人 们 的 J 为 分 为 两 种 . 
应 对 性 行为 和 表现 性 行为 。 应 对 性 行为 又 称 为 目的 行为 ， 这 类 行为 具有 明确 
的 动机 ;而 表现 性 行为 则 没有 明确 的 目的 ， 只 是 表现 或 表达 一 种 状态 。 如 果 
人 们 完全 抛弃 动机 、 自 我 意识 和 各 种 来 自 文 化 、 社 会 的 束缚 ， 就 能 达到 一 种 
顶峰 体验 ， 从 而 达到 人 们 对 自我 实现 的 需要 。 因 此 ， ei “ 目 
我 实现 ”的 需求 入 手 ， 使 用 户 在 行为 上 的 体验 达到 最 高 峰值 ， 提 升 移动 应 用 
在 用 户 心目 中 的 价值 。 不 同学 者 /设计 师 对 于 和 5 为 的 研究 见 表 4。 


表 4-1 不 同学 者 /设计 师 对 于 行为 的 研究 














学 者 /设计 师 对 于 行为 的 研究 


J 目 丑 感应 中 的 用 户 动 作 (行为 ) 攻 
Kees Overbeeke 重要 、 直接 的 信息 源 ， 用 户 情 感 
过 行 为 直接 表达 出 来 


将 用 户 的 行为 目标 视 为 产品 研发 的 重要 
Ob 参数 ， 设 计 者 通过 它 考虑 产品 的 功能 


将 用 户 行 为 从 低 到 高 分 为 三 个 层次 ， 即 
Bonnie A. Nardi 操作 、 动 作 与 行为 。 这 三 个 层次 受到 条 件 、 
目标 和 动机 的 影响 


将 人 们 的 行为 分 为 两 种 : 应 对 性 行为 和 
表现 性 行为 。 如 果 人 们 完全 抛弃 动机 、 局 
lt EN 我 意识 和 各 种 来 和 目 文 化 、 社 会 的 束缚 ， 就 
能 达到 一 种 顶峰 体验 ， 从 而 达到 人 们 对 目 
我 实 现 的 需 币 要 


将 人 的 行动 分 为 7 个 阶段 : 确定 目标 、 确 
定 意图 、 明 确 行动 内 容 、 执 行 、 感 知 外 部 
世界 状况 、 解 释 外 部 世界 状况 、 评 估 行 动 
Donald A. Norman 结果 。 行 动 可 以 从 任何 一 点 开始 ， 触 发 动 
作 会 受到 具体 情况 的 影响 ， 如 环境 、 习 惯 
等 。 如 果实 际 执行 与 用 户 所 设想 的 行动 方 
式 相悖 ， 就 会 产生 执行 与 评估 之 间 的 鸿沟 


唐纳德 A. 诺 曼 ( Donald A.Norman ) “将 人 的 行动 分 为 7 个 阶段 . 
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确定 目标 、 确 定 意 图 、 明 确 行动 内 容 、 执 行 、 感 知 外 部 世界 状况 、 解 释 外 
部 世界 状况 、 评 佑 行动 结果 。 这 7 个 阶段 可 以 概括 为 执行 与 评估 的 过 
程 。 执 行 包 括 了 目标 、 行 动 顺序 和 执行 ， 而 评估 则 包括 感知 、 解 释 和 评估 
三 个 阶段 。 在 现实 生活 中 ， 人 们 的 目标 往往 是 抽象 和 不 完善 的 ， 因 此 需要 
将 其 转化 为 实现 目标 的 具体 意图 ; 为 了 实现 目标 的 意图 ， 需 要 具体 动作 顺 
序 的 指引 ， 并 加 以 执行 ;执行 完毕 ， 人 们 会 先 感知 外 部 世界 ， 再 根据 自身 
的 期 望 ， 对 感知 的 状态 加 以 解释 ， 最 后 与 目标 进行 对 比 。 人 们 的 行动 是 复 
杂 的 ， 并 不 会 完全 按照 这 7 个 阶段 的 顺序 活动 。 行 动 可 以 从 任何 一 阶段 
开始 ， 触 发 动作 会 受到 具体 情况 的 影响 ， 如 环境 、 习 惯 等 。 如 果实 际 执行 
与 用 户 所 设想 的 行动 方式 相悖 ， 就 会 产生 执行 与 评估 之 间 的 鸿沟 。 

( 1 ) 移动 应 用 的 用 户 行为 模型 

基于 某 一 个 具体 产品 的 用 户 行为 模型 可 以 分 为 购买 和 使 用 两 种 行为 类 
别 ， 而 移动 应 用 的 用 户 行为 模型 主要 涉及 用 户 的 使 用 行为 ， 也 就 是 上 文中 提 
到 的 具体 行动 的 顺序 和 执行 。 对 于 产品 设计 中 的 用 户 行为 分 析 ， 柳 沙 ” 将 设 
计 中 的 用 户 行为 分 为 两 种 情况 : 中 设计 师 在 设计 时 预 设 用 户 行为 ， 用 户 需要 
按照 设计 师 的 安排 进行 操作 ， 才 能 对 产品 产生 正面 的 评价 ，@ 用 户 通 过 对 产 
品 的 反复 学 习 ， 形 成 使 用 习惯 。 当 用 户 使 用 产品 没有 了 明确 行为 目标 时 ， 设 计 
师 需 要 先 研究 用 户 心理 与 潜在 的 行为 动机 ， 再 制定 一 套 具 体 的 操作 流程 。 

与 计算 机 ( PC ) 端的 用 户 不 同 ， 移 动用 户 的 行为 状态 比较 多 变 。 为 了 设 
计 良 好 的 行动 顺序 ， 设 计 师 首先 要 了 解 目 标 用 户 的 行为 状态 。Josh Clark ”在 
《Tapworthyy》 一 书 中 提 到 了 移动 用 户 的 三 个 主要 移动 行为 状态 ( 见 表 4-2 )。 

表 4-2 ”移动 应 用 用 户 行为 状态 


行为 状态 特点 


微 任务 探 作 实用 工具 应 用 





重复 菜 项 和 倘 单 的 操作 ”实用 工具 应 用 /生产 为 辅助 应 用 


任务 耗 时 较 长 沉浸 式 应 用 
即时 的 : 用 户 需要 移动 应 用 帮 他 们 完成 即时 的 任务 ， 任 务 所 产生 的 操 
作 往 往 较 轻 ， 也 称 为 徽 任 务 。 对 应 的 行为 动作 有 至 询 、 创 建 、 编 辑 、 更 
新 ， 即 时 聊天 、 码 看 天 气 等 都 属于 即时 性 微 任 务 的 范畴 。 
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重复 的 : 用 户 会 不 大 其 烦 地 重复 进行 果 些 微 任务 操作 ， 触 发 这 项 操作 
的 原因 可 以 是 主观 的 ， 也 可 以 是 客观 的 。 例 如 ， 基 于 当前 位 置 [LS 
的 签到 ( Check in ) 活动 。 

Es 如 等 每 的 时 
间 、 体 闲 的 时 间 等 。 这 时 的 用 户 操作 时 间 相 对 较 长 ， 或 市 有 连续 
应 的 用 户 行 为 有 娱乐 、 探 索 、 发 泄 等 。 游 戏 、 音 乐 、 购 物 等 es 
户 的 这 种 状态 下 被 使 用 的 频率 最 高 。 


因此 ， 在 设计 移动 应 用 界面 时 ， 设 计 师 需要 充分 了 解 目 标 用 户 的 自然 
| 并 按照 最 符合 目标 用 户 原 有 行为 习惯 的 方式 进行 设计 。 同 时 ， 设计 
要 在 分 析 用 户 操作 状态 的 前 提 下 结合 用 户 的 心理 模型 ， 制 定 正确 的 行 
mi 
( 2 ) 基于 不 同 移动 应 用 用 户 层次 的 行为 模型 
在 分 析 移 动用 户 时 ， 应 该 将 用 户 分 为 新 手 、 中 间 和 专家 三 个 层次 ( 三 
种 用 户 特点 详 见 3.2.3 节 )， 见 表 4-3。 





表 4-3 移动 应 用 不 同 用 尸 层 级 的 行为 特点 与 设计 师 工 作 


用 户 特点 用 户 行为 特点 设计 师 工 作 


首次 使 用 应 用 的 群体 不 了 解 应 用 具体 的 操作 方式 帮助 他 们 迅速 掌握 应 用 
的 概念 、 范 围 与 操作 


mn Ce A 


应 用 笑 性 最 高 且 最 活跃 的 群体 省 解 应 用 的 基本 概念 特点 ， a 符合 他 们 习惯 的 操作 ， 
掌握 了 绝 大 部 分 的 使 用 技巧 帮助 他 们 达到 某 种 目标 


NN ND A 一 > 


铺 通 应 用 的 少量 群体 。 精通 应 用 中 所 有 的 功能 和 操作 与 他 们 交流 ， 吸取 他 们 的 
fu fu i Ye 
新 于 用 户 : 要 使 他 们 迅速 掌握 应 用 的 概念 和 沁 围 ， 就 需要 米 用 新 于 帮 


助 、 新 手 引 导 等 辅助 方式 帮助 用 户 熟 悉 应 用 的 操作 。 移 动 应 用 一 般 采 用 新 
手 引 导 的 方式 将 用 户 市 入 到 应 用 程序 的 使 用 中 。 人 例如， 以 视 况 明暗 对 比 强 





〇 基于 位 置 的 服务 ( Location Based Service，LBS ) 指 通过 网 络 获取 移动 终端 用 户 的 地 理 位 置 
信息 ， 并 提供 与 位 置 相 关 的 各 类 信息 服务 。 一 一 笔者 注 
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烈 的 卡通 小 贴 二 告知 用 户 使 用 时 的 拉 巧 和 隐 莽 的 功能 ， 方 便 用 户 以 最 快捷 
的 万 式 执行 操作 。 

中 间 用 户 : 一 般 将 应 用 视 作 一 种 帮助 其 达到 示 种 目标 的 工具 。 因 此 ， 
应 用 中 的 导航 、 探 件 和 按钮 需要 被 放置 在 最 明显 的 区 域 ， 以 便 用 户 轻 松 寻 
找 、 操 作 与 记忆 。 此 外 ， 移 动 应 用 还 需要 增加 帮助 工具 来 应 对 用 户 踪 态 相 
天 操作 方法 与 步骤 的 情况 。 在 进行 产品 迭代 时 ， 要 特别 注意 适应 中 间 用 户 
的 使 用 习惯 。 乔 将 应 用 的 界面 布局 、 交 互 方 陈 等 设计 内 容 发 生 重 六 的 变 
化 ， 则 容易 导致 中 间 用 户 使 用 障碍 ， 进 而 造成 中 间 用 户 大 量 流 矢 。 

专家 用 户 是 少量 并 且 重 要 的 使 用 人 和 群 。 对 于 移动 应 用 来 说 ， 专 家 用 户 
的 意见 会 影响 新 手 用 户 对 产品 的 认 知 ; 而 对 于 移动 应 用 的 设计 来 总 ， 专 家 
用 户 的 反馈 是 应 用 体验 和 功能 提升 最 有 价值 的 参考 意见 。 

综 上 所 述 ， 新 手 用 户 是 首次 接触 并 使 用 应 用 的 群体 ， 其 在 具体 行为 上 
的 表征 比较 模糊 ， 中 间 用 户 是 应 用 的 最 大 及 最 稳定 的 群体， 他 们 了 解 应 用 
的 功能 并 在 行为 上 表现 出 明显 的 目的 性 ; 专家 用 户 是 精通 应 用 绝 六 部 分 操 
作 功 能 及 方法 的 用 户 群 体 ， 他 们 在 行为 上 的 表现 已 经 超越 了 一 般 性 操作 玫 
畴 。 设 计 师 在 构建 移动 应 用 的 用 户 行为 模型 时 ， 应 该 注重 考虑 使 新 手 用 户 
快速 地 成 为 中 间 用 户 ， 并 保证 他 们 体验 过 程 的 愉悦 性 ， 而 对 于 想 成 为 或 已 
经 成 为 专家 的 用 户 群 ， 设 计 师 要 避免 给 他 们 设置 过 多 障碍 ， 使 他 们 也 能 沉 
浸 于 体验 的 乐趣 中 。 


4.2.3 ”情感 模型 


人 是 具有 丰富 情感 的 动物 。“ 嘉 、 她 、 衰 、 乐 、 爱 、 恐 ”等 都 是 比较 
常见 的 情感 表现 。 

心理 学 认为 情感 是 人 对 客观 事物 是 否 满足 自己 需要 而 产生 的 态度 体 
验 。 人 们 内 心 的 情感 需要 受到 外 界 刺激 后 被 激发 出 来 ， 正 如 列 夫 ， 尼 古 拉 
耶 维 奇 . 托 尔 斯 泰 ( Thomas EWartenberg ) 所 言 : “要 用 动作 、 线 条 、 色 彩 
和 声音 来 传达 以 及 唤起 心中 的 情感 ”。“ 用户 情感 模型 是 关于 用 户 在 体 
验 产 品 过 程 中 产生 的 一 系列 情感 因素 。 

自 20 世纪 80 年 代 起 ， 情 感化 设计 理论 被 带 入 到 产品 设计 中 。 例 如 ， 
德国 青蛙 设计 公司 ( Frog Design ) 就 提出 形式 跟随 情感 的 设计 理念 。 情 
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加 全 0 创作 产品 的 过 Sn 0 衣 感 ， 结 合 
心 的 情感 需 中 | 设计 中 ， 并 
























































人 可 人 用 户 能 在 使用 六 的 过 程 中 在 到 人 所 感动 "。” 例 如， 飞利浦 
公司 在 2009 传感器 的 豪 饪 碗 (Multi-sensoria] WA 
它 能 通过 光学 传感器 已 感知 食物 的 颜色 ， 自动 与 食物 进行 色彩 的 搭配 。 

巧妙 的 设计 可 以 让 使 用 者 在 用 餐 的 时 候 ， 获 得 更 加 愉悦 的 心情 ss 
了 用 户 的 生活 品质 。 情 感 属 性 划分 表 见 表 4-4。 


表 4-4 ”情感 属性 划分 表 











对 用 户 的 影响 


令 人 感到 强大 ， 提 高 了 人 们 的 威望 和 控制 感 


提供 了 一 种 综合 性 的 丰富 体验 














小 
EE 








感 同 属于 人 对 客观 事物 产生 的 主观 体验 ， 但 它们 之 间 也 存在 
一 些 差 别 。 
人 情绪 是 与 生理 需要 相关 的 心理 活动 ; 情感 是 与 社会 性 需要 相关 的 
心理 活动 。 
@) 情绪 具有 不 确定 性 ， 容 易 受 环境 、 情 境 和 主观 感受 也 感 是 
人 在 适应 社会 的 过 程 中 逐渐 产生 的 ， 具 有 稳定 性 、 
@) 情绪 是 情感 的 表现 形式 ， 具 有 外 显 性 的 特征 ;而 情感 建立 在 情绪 








的 基础 上 ， 通 第 不 易 外 露 ， 具 有 隐藏 性 的 特征 。 
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因此 ， 情 绪 与 情感 是 彼此 交融 而 又 不 可 分 割 的 两 个 部 分 ， 情 感 是 人 类 
特有 的 更 加 高 级 的 心理 现象 。 此 外 ， 由 于 情感 与 价值 判断 相关 ， 认 知 与 理 
解 相关 ， 因 此 情感 与 认 知 也 是 不 可 分 割 的 两 部 分 。 

唐纳德 A. 诺 曼 ( Donald A. Norman ) “于 2003 年 提出 了 情感 化 设 
计 的 三 个 层次 ， 本 能 水 平 的 设计 、 行 为 水 平 的 设计 和 上 反思 水 平 的 设计 。 本 
能 水 平 指 物品 的 外 观 表现 ， 行 为 水 平 指 物品 的 内 在 行为 属性 ， 反 思 水 平 指 
物品 对 用 户 的 思维 和 情感 产生 的 影响 。 简 而 言 之 ， 本 能 水 平 的 设计 指 对 设 
计 对 象 外 形 、 质 地 、 感 官 、 直 竞 的 设计 ; 行为 水 平 的 设计 指 对 设计 对 象 可 
用 性 、 易 学 性 、 逻 辑 性 等 方面 的 设计 ; 反思 水 平 的 设计 指 对 设计 对 象 文 
化 、 和 意义 、 传 达 信 息 等 层面 的 设计 。 反 思 水 平 设 计 影 响 用 户 的 情绪 、 情 
感 、 和 意识 和 认 知 ， 正 是 用 户 情 感 模 型 内 容 的 体现 。 

在 移动 应 用 中 ， 本 能 水 平 设 计 一 般 指 应 用 视觉 界面 或 影响 用 户 第 一 感 
千 体 验 的 设计 ， 如 触 党 、 听 党 等 。 行 为 水 平 设 计 是 关联 应 用 可 行 性 、 使 用 
效 庚 的 重要 因素 ， 如 能 否 帮 助 用 户 顺 利 完成 某 个 任务 。 优 秀 的 行为 水 平 设 
计 应 该 专注 于 理解 和 满足 产品 用 户 的 真实 需要 。 有 反思 水 平 设 计 是 体现 应 用 
价值 并 产生 用 户 荞 度 的 关键 因素 ， 良 好 的 反思 水 平 设计 不 仅 能 为 目标 用 户 
建立 人 生 目 标 ， 还 能 弥补 应 用 在 本 能 和 行为 水 平 设计 上 的 不 足 。 

因此 ， 设 计 师 应 该 通过 理解 用 户 的 情感 因素 产生 同 理 心 ， 并 运用 情感 化 
的 交互 方式 帮助 用 户 与 应 用 之 间 建 立 感情 ， 真 正 使 产品 深入 人 心 。 移 动 应 用 
的 情感 化 程度 如 图 4-9 所 示 。 在 移动 应 用 中 ， 情 感化 的 交互 设计 应 该 贯穿 于 
应 用 设计 的 每 一 个 模块 。 例 如 ， 在 引导 页 面 ( 见 图 4-10 ) 加 入 情感 化 的 交 
互 界 面 有 利于 将 用 户 更 好 地 市 入 应 用 的 使 用 情境 中 ， 使 用 户 能 够 愉快 地 使 用 
应 用 ， 并 进一步 产生 情感 上 的 共鸣 。 





应 用 使 用 过 程 中 的 乐趣 和 效率 〈 功 能 、 易 用 性 ) 


应 用 界面 的 外 在 形式 〈 美 观 、 趣 味 性 ) 


图 4-9 移动 应 用 的 情感 化 程度 


从 需求 层次 的 角度 来 看 ， 用 户 认 知 模型 、 行 为 模型 以 及 情感 模型 是 一 
个 需求 渐进 的 过 程 。 用 户 情感 模型 相 较 于 用 户 认 知 模型 和 行为 模型 更 加 高 
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级 ， 用 户 情感 模型 是 用 户 实现 自我 需求 的 必 经 途径 。 为 了 提升 移动 应 用 的 
用 户 体验 ， 对 用 户 情感 模型 的 研究 与 分 析 应 参与 到 指导 具体 的 应 用 界面 设 
计 活 动 中 来 。 


和 





W/Z 
Na 


开始 聚 划算 





4-10 聚 划 算 应 用 的 引导 页 面 


4.3 | 用 户 模 本 的 具体 表现 : 人 物 角 色 模 型 


4.3.1 人 物 角 色 模 型 及 其 分 类 
在 戏剧 中 通常 会 出 现 男 主角 、 女 主角 、 男 配角 、 女 配角 等 多 个 人 物 角 


色 ， 他 们 是 贯穿 整 部 戏剧 的 核心 。 对 于 设计 工作 者 而 言 ， 用 户 扮 演 看 使 用 
者 、 受 众 、 被 服务 者 的 角色 。 
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“Persona” 一 词 最 早 来 自古 希腊 戏剧 所 使 用 的 面具 ， 后 来 引申 出 “ 角 
色 ” 这 个 概念 。 人 物 角 色 是 指 对 目标 群体 真实 特征 的 勾勒 ， 是 真实 用 户 的 
综合 原型 。 它 建立 在 以 用 户 为 中 心 的 设计 思想 之 上 。 人 物 角 色 模 型 的 建立 
是 用 户 研究 人 员 运 用 一 定 的 研究 方法 ( 定性 或 定量 ) 提取 人 研究 对 象 在 行 
为 、 目 标 和 观 挟 方面 有 关 的 信息 后 ， 再 构建 出 的 一 个 虚拟 人 物 角 色 原 型 。 
也 就 是 说 ， 最 终 的 人 物 角色 模型 包含 了 个 人 的 基本 信息 与 生活 环境 摘 述 、 
产品 的 使 用 情境 、 用 户 目标 或 产品 使 用 行为 摘 述 等 。 一 个 人 物 角 色 模 型 集 
合 了 一 群 人 的 共同 特征 ， 这 种 特征 主要 体现 在 用 户 目标 、 行 为 方式 以 及 态 
度 上 。 一 个 产品 通常 会 设计 3 一 6 个 人 物 角色 来 代表 所 有 的 用 户 群 体 。 

人 物 角色 模型 能 帮助 产品 研发 团队 建立 统一 的 思想 和 目标 ， 在 专注 于 
特定 用 户 和 群体 的 基础 上 达成 共识 ， 以 提高 创新 效率 和 市 来 更 好 的 决策 。 人 
物 角 色 既 可 以 用 于 评价 设计 ， 又 可 以 给 设计 带 来 灵感 。 若 设计 师 创 作 了 一 
个 有 趣 的 、 颇 具 冒 险 性 和 实验 性 的 角色 ， 那 么 与 之 相应 的 服务 和 产品 形式 
就 会 独树一帜 。 根 据 微 软 设 计 师 Pruitt 和 Grudin ( 2003 ) 创建 的 人 物 
角色 模型 模板 设计 了 适用 于 移动 应 用 人 物 角 色 模 型 的 模板 ( 见 表 4-5 ) 。 
在 该 模板 中 ， 设 计 师 可 以 根据 有 具体 的 设计 项 目 选取 其 中 的 要 素 进 行 组 合 ， 
并 最 终 设 计 出 完整 的 人 物 角 色 模 型 。 


表 4-5 人 物 角 色 制 定 模 板 


人 物 角 色 的 基本 信息 (姓名 、 照 片 等 ) 


人 物 角 色 的 个 人 信息 (年龄 、 性 别 、 爱 好 、 性 格 、 所 在 地 、 怒 慢 的 事物 、 教 育 背 景 、 职 业 、 
家 庭 情 况 、 婚 姻 情 况 等 ) 
日 常生 活 的 一 天 描述 人 物 角色 日 第 的 生活 与 工作 
所 用 移动 设备 
对 移动 设备 及 其 技术 的 熟悉 情况 


喜欢 的 移动 应 用 
对 移动 应 用 的 看 法 


与 产品 相关 的 信息 


目标 人 物 角 色 对 于 应 用 的 使 用 目标 


场景 剧本 描述 人 物 角 色 在 不 同 场景 下 应 用 使 用 的 情况 


问题 列 出 人 物 角色 在 应 用 使 用 过 程 中 所 遇 到 的 问题 





解决 方案 针对 罗列 的 问题 提出 解决 方案 
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Steve Mulder 和 Ziv Yaar ”将 人 物 角 色 模 型 分 为 三 类 定性 人 物 角 
色 、 经 定量 检验 的 定性 人 物 角 色 、 定 量 人 物 角 色 ( 见 图 4-11 ) 。 





i 
i 


低 == 高 
成 本 与 风险 


4-11 三 类 人 物 角 色 模 型 


(1 ) 定性 人 物 角色 

通过 用 户 访 谈 等 定性 研究 方法 提取 大 量 信息 ， 再 根据 每 个 群体 中 描述 
的 用 户 共同 点 来 创建 用 户 群 组 。 每 一 个 类 型 的 用 户 群 都 能 发 展 一 个 人 物 角 
色 ， 因 此 一 个 产品 往往 会 出 现 多 个 人 物 角 色 模 型 。 艾 伦 : 库 伯 (Alan Cooper) 
曾经 在 《交互 设计 精髓 2》 中 建议 先 确 定 一 个 主要 的 人 物 角 色 ， 再 根据 具 
体 情 况 确 定 多 个 次 要 的 人 物 角 色 。 定 性 人 物 角色 的 优点 是 人 力 和 财力 的 花 
费 成 本 相对 较 小 ， 由 用 户 访谈 等 形式 提炼 而 来 的 人 物 角色 更 为 简单 和 易 
懂 。 但 这 种 方式 也 存在 弊端 :由 于 缺乏 量化 研究 和 数据 的 支撑 ， 很 难 把 握 
人 物 角色 定义 的 准确 性 ; 同时 ， 由 于 研究 人 员 已 经 对 目标 用 户 进行 了 假 
设 ， 因 此 在 与 用 户 谈话 的 过 程 中 不 免 会 将 这 些 假设 市 入 访谈 中 ， 这 样 就 容 
易 造成 访谈 是 为 了 验证 自己 假设 的 观点 ， 从 而 导致 最 后 设计 的 人 物 角色 与 
之 前 假设 的 人 物 角色 完全 一 致 的 问题 。 

( 2 ) 经 定量 检验 的 定性 人 物 角色 

先 经 由 定性 研究 获取 与 用 户 目 标 、 需 求 和 行为 有 关 的 信息 ， 并 创建 
细 分 的 用 户 群 组 。 再 通过 定量 研究 验证 细 分 用 户 群 组 所 反映 事实 的 准确 
程度 ， 以 使 人 物 角 色 拥 有 真实 证 据 的 支持 而 不 再 是 一 个 简单 的 虚构 模 
型 。 其 优点 如 下 : 既 包 含 了 定性 研究 中 简单 和 易 懂 的 人 物 角色 定义 ， 又 
能 使 人 物 角 色 的 定义 更 加 符合 实际 情况 ; 该 人 物 角 色 模 型 设 定 需要 的 专 
业 人 员 相 对 较 少 ， 研 究 人 员 可 以 自己 进行 简单 的 交叉 分 析 。 但 同时 该 类 
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模型 也 存在 一 定 的 缺点 ; 由 于 定量 研究 的 介入 ， 时 间 成 本 增加 ， 整 个 模 
型 设 定 流 程 会 扩展 到 6 一 8 周 才 能 完成 ; 由 于 是 建立 在 定性 人 物 角 色 研 
究 的 基础 上 ， 因 此 存在 最 终 人 物 角 色 是 为 了 验证 之 前 假设 人 物 角 色 的 风 
险 ; 看 定量 研究 数据 推翻 了 之 前 的 定性 人 物 角 色 定 义 ， 人 研究 人 员 将 不 得 
不 重新 开展 定性 研究 。 

( 3 ) 定量 人 物 角色 

将 定性 研究 的 用 户 信 息 ( 目标 、 需 求 和 行为 ) 细 分 成 一 个 用 于 定量 分 
析 的 选项 列表 。 再 通过 定量 研究 收集 细 分 选项 的 数据 ， 并 通过 统计 聚 类 分 
析 细 分 用 户 ， 此 步骤 是 依靠 数据 分 析 工 具 来 处 理 多 个 变量 信息 ， 寻 拷 出 可 
供 描述 的 共同 性 和 差异 性 的 细 分 模型 。 最 后 ， 用 户 研 究 人 员 再 为 每 一 个 细 
分 群体 创建 一 个 人 物 角色 。 定 量 人 物 角色 相 比 前 两 种 人 物 角色 显得 更 加 科 
学 和 严谨 ， 其 主要 优点 如 下 : 定量 技术 与 定性 分 析 的 结合 ， 使 人 物 角 色 樟 
型 更 具 客 观 性 ; 在 数量 众多 的 可 能 性 中 通过 迭代 技 到 一 个 能 用 于 创建 人 物 
角色 的 最 好 模型 ， 有 助 于 团队 从 最 佳 的 角度 来 思考 问题 ; 通过 聚 类 分 析 能 
发 现 更 多 变量 ， 软 件 工具 更 擅长 同时 与 大 量 不 同 的 因素 打交道 并 寻找 人 类 
肉眼 无 法 发 现 的 共同 性 和 差异 性 。 其 缺点 是 : 由 于 定量 人 物 角 色 设 定 是 一 
个 反复 和 连续 统计 分 析 的 过 程 ， 因 此 需要 花费 7 一 10 周 的 时 间 ， 工 作 量 较 
大 ; 该 模式 设 定 需要 更 多 专业 人 员 ， 人 力 成 本 增加 ; 分 析 结 果 可 能 会 与 现 
有 假设 和 商业 方向 相悖 。 

综 上 所 述 ， 定 性 人 物 角色 适用 于 企业 及 团队 、 无 须 量 化 数据 的 小 型 项 
目 中 ; 经 定量 检验 的 定性 人 物 角色 适用 于 时 间 、 人 力 与 财力 预算 充足 ， 对 
定性 人 物 角色 模型 的 正确 性 有 一 定 把 握 ， 而 团队 或 企业 管理 层 均 要 求 以 量 
化 数据 验证 人 物 角色 模型 真实 性 的 大 中 型 项 目 中 ;而 定量 人 物 角色 则 适用 
于 时 间 、 人 力 与 财力 预算 充足 ， 研 究 人 员 、 团 队 或 企业 管理 层 均 希望 通过 
研究 多 个 细 分 模型 来 找到 最 适合 项 目的 人 物 角 色 模 型 ， 以 及 在 众多 变量 中 
寻找 到 最 重要 的 人 物 角 色 变 量 。 因 此 ， 移 动 应 用 的 开发 团队 要 根据 实际 情 
况 采 用 合适 的 人 物 角 色 模 型 类 型 。 


4.3.2 ”和 信物 角色 模型 创建 的 步骤 与 万 法 


人 物 角色 模型 是 整个 界面 设计 环节 中 的 重要 内 容 ， 因 此 思考 如 何 更 有 效 、 
合理 地 创建 人 物 角色 模型 成 为 了 设计 师 面临 的 关键 问题 。 不 同 的 设计 师 、 学 者 
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通过 目 己 的 研究 和 实践 ， 对 人 物 角色 创建 鸭 步 又 都 提出 了 自己 的 看 法 。 

艾 伦 . 库 伯 (Alan Cooper)“ 认 为 人 物 角 色 应 该 按照 7 个 步骤 进行 ， 检 
到 人 物 角 色 假 设 、 将 访谈 主题 映射 为 行为 变量 、 界 定 重要 的 行为 模式 、 综 
合 特征 和 相关 目标 、 检 查 完 整 性 、 展 开 叙 述 、 指 定 人 物 角色 类 型 。 

Lene Nielsen”“ 则 提出 了 人 物 角色 创建 的 10 个 步骤 寻找 用 户 、 建 
立 假设 、 证 实 、 寻 找 模板 、 构 造 人 物 角 色 、 定 义 情 境 、 验 证 和 文 持 、 知 识 
传播 、 创 建 场 景 、 可 持续 发 展 。 

Autodesk 公司 的 资深 用 户 体验 专家 威 尔 森 ( Chauncey Wilson )“ 通 
过 综合 Alan Cooper、John Pruitt、Tamara Adlin 、Lene Nielsen 等 专家 
在 人 物 角 色 方 面 的 研究 ， 将 创建 人 物 角 色 模 型 分 为 6 个 步骤 : 确认 重要 的 
用 户 类 别 、 处 理 数 据 、 辨 别 用 户 的 次 级 分 类 并 创建 骨 染 、 评 估 相 确定 骨 染 
的 优先 级 、 把 骨架 发 展 成 为 人 物 角 色 、 验 证 人 物 角 色 。 第 1 一 3 步 是 人 物 
角色 的 构想 阶段 ， 而 第 4 一 6 步 是 人 物 角色 的 孕育 阶段 。 他 所 总 编 的 这 套 
方法 里 加 精炼 和 和 实用， 因此 移动 应 用 人 物 角 色 模 型 也 可 以 借鉴 该 方法 的 步 
又 实施 创建 ( 见 图 4-12 )。 


确认 重要 的 用 户 类 别 


处 理 数 据 





创建 肯 架 


WO 评估 和 确定 


骨 染 的 优先 级 





4-12 人 物 角 色 模 型 创建 的 步骤 


(1 ) 确认 重要 的 用 户 类 列 
用 户 类 别 是 由 用 户 群 共同 具有 的 系列 特征 所 设 定 的 。 确 认 重 要 的 用 户 
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类 列 能 帮助 研究 者 将 人 们 对 用 户 的 主观 看 法 与 以 数据 为 基础 的 人 物 角 色 联 
系 起 来 ， 利 于 规划 和 处 理 数 据 。 一 般 确 认 重 要 的 用 户 类 别 应 从 用 户 角色 、 
用 户 目 标 与 用 户 细 分 三 个 方面 进行 思考 。 

用 户 角 色 通 党 与 用 户 的 工作 类 型 、 职 位 等 其 他 与 智能 手机 交互 过 程 
的 外 在 因素 相关 。 它 还 与 某 一 类 活动 有 关 ， 这 类 活动 能 使 某 个 用 户 成 为 
示 一 类 用 户 。 因 此 ， 首 移 要 确定 用 户 角色 的 类 别 ， 如 学 生 、 自 领 、 家 庭 
主妇 等 。 另 外 ， 某 个 用 户 在 不 同 的 时 间 里 有 可 能 会 担当 不 同 的 角色 。 

用 户 目 标 是 用 户 自己 用 语言 来 拘 述 基于 攻 事 物 所 想 要 达到 的 目的 。 
目标 包括 对 移动 应 用 的 使 用 方式 、 应 用 中 具体 任务 的 操作 等 。 用 户 目 
标 与 用 户 对 应 用 的 看 法 及 其 操作 体验 相关 ， 不 同 用 户 角色 的 目标 也 和 存 
在 才 寞 。 人 例如， 家庭 主妇 硕 望 应 用 能 更 加 简单 、 自 领 硕 望 应 用 能 更 加 
智能 化 、 学 生 希 望 应 用 能 更 加 有 趣 。 因 此 ,为 了 使 人 物 角 色 模 型 对 应 
用 设计 有 里 大 的 帮助 ， 要 将 用 户 目 标 作为 用 户 角 色 模 型 构建 的 基础 来 
进行 分 析 人 研究 。 

用 户 细 分 是 以 某 一 用 户 与 其 他 喝 多 用 户 所 共同 拥有 的 特征 来 掏 述 该 细 
分 类 用 户 的 。 此 方法 根据 人 口 统计 数据 、 消 费 、 态 度 和 行为 数据 来 定义 用 
户 类 别 。 马 既 可 以 通过 数据 的 量化 分 析 定 义 类 别 ， 又 可 以 从 天 于 用 户 群 的 
材料 中 推 新 出 用 户 细 分 类 别 。 移 动 应 用 开发 团队 能 通过 用 户 细 分 定义 用 户 
的 目标 ， 这 些 细 分 反映 了 当前 市 场 的 消费 群体 及 其 潜在 的 市 场 机 会 。 将 用 
户 细 分 能 使 用 户 类 列 的 定义 更 加 全 面 。 例 如 ， 白 领 用 户 中 的 新 手 用 户 、 中 
间 用 户 与 专家 用 户 在 和 年龄、 职业、 学历、 收入、 手机 应 用 使 用 习惯 、 对 手 
机 应 用 的 看 法 及 其 操作 目标 等 均 存 在 差异 ， 用 户 细 分 就 是 要 将 这 些 用 户 参 
数 细 分 罗列 出 来 。 因 此 ， 用 户 细 分 能 帮助 产品 人 赋 发 团队 细 化 重要 的 用 户 关 
别 ， 使 人 物 角 色 模 型 更 加 全 面 。 

应 用 开发 团队 一 般 先 采用 头脑 风暴 的 方法 讨论 用 户 角色 、 目 标 和 细 分 
的 概念 ， 再 在 以 上 三 个 内 容 的 研究 基础 上 决定 用 户 的 类 别 。 

( 2 ) 处 理 数 据 

对 于 上 一 阶段 讨论 数据 的 处 理 是 为 了 将 用 户 的 特征 进行 合理 地 归 类 ， 
并 提取 与 用 户 及 设计 有 关 的 信息 。 一 般 采 用 和 集体 协作 的 KJ 法 将 与 用 户 有 
天 的 资料 ( 包括 语言 、 文 字 等 ) 收集 起 来 ， 并 利用 其 内 在 的 相互 关系 制作 
成 归 类 合并 图 ， 以 便 快 速 地 整理 出 思路 并 从 数据 中 提炼 隐 含 的 主题 。 
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( 3) 辨 列 用 户 的 次 级 分 类 并 创建 骨架 

此 阶段 能 帮助 应 用 开发 团队 评估 数据 信息 ， 分 析 用 户 类 别 与 子 类 
别 ， 央 以 骨架 ( 各 用 户 子 类 别 中 突出 的 数据 护 的 简要 列表 ) 的 形式 进行 
表现 。 首 先 要 在 每 个 大 的 类 别 下 确认 用 户 的 子 类 别 ， 其 次 ， 针 对 每 个 用 
尸 类 列 下 集聚 的 数据 ， 团 队 成 员 需 评估 和 计 论 每 个 类 别 被 分 成 两 个 或 更 
多 子 类 别 的 必要 性 和 可 能 性 ; 最 后 ， 街 团队 成 员 确 定 用 户 类 别 和 子 类 别 
后 ， 册 为 每 一 个 用 良子 类别 创建 一 个 数据 范围 内 、 非 常 简短 的 类 似 骨 积 
的 项 目 列 表 。 列 表 的 内 容 应 该 用 来 定义 相 区 分 用 户 子 类 别 的 事 洋 ， 而 不 
是 天 注 用 户 具 体 细 广 信息 的 人 物 角 色 草 图 ， 因 此 项 目 列表 要 避免 任何 用 
述 性 的 细 市 信息 。 

(4 ) 评估 和 确定 骨架 的 优先 级 

生 骨 架 确 定 后 ， 应 用 研发 团队 要 先 评 信和 家 染 的 具体 内 容 及 其 重要 
性 ， 绸 找 出 骨架 下 的 次 级 要 点 ， 并 以 优先 级 的 形式 进行 排列 。 团 队 成 
员 首 先 需 根据 自己 的 理解 从 一 个 或 多 个 与 数据 崇 窗 相关 的 属性 方面 
( 移动 应 用 的 使 用 频率 、 市 场 规模 等 ) 给 骨架 进行 排序 ， 然 后 再 为 移动 
应 用 确定 主要 用 户 目标 和 次 要 用 户 目 标 ， 删 除 与 产品 开发 天 联 性 较 小 
的 骨架 。 

(5) 把 骨架 发 展 成 为 人 物 角 色 

人 物 角 色 的 基本 文档 包括 人 物 角 色 的 细 太 与 任务 、 人 物 角 色目 标 、 人 
物 角 色 细 分 、 人 物 角 色拉 能 和 知识 、 人 物 角色 环境 和 典型 活动 。 可 以 使 用 
骨 殿 文件 作为 模板 来 为 每 个 人 物 角色 创建 基本 文档 。 此 外 ， 还 要 将 文档 中 
的 每 项 核心 特征 具体 化 ， 将 骨架 中 的 特征 转化 为 具体 和 详细 的 属性 信息 ， 
用 具体 事 尖 、 短 语 、 句 子 或 段落 代 叔 骨架 中 的 内 容 。 例 如 ， 将 男孩 转换 为 
个 人 的 名 字 ， 将 家 长 变换 为 父亲 或 母 茶 。 

当 基 本 文档 及 其 内 容 得 到 充实 后 ， 为 了 使 人 物 角 色 显 得 更 加 真实 条 
切 ， 就 要 将 文档 中 的 数据 转化 为 一 个 流畅 的 改 事 ， 也 就 是 采用 场景 剧本 的 
方 去 体现 人 物 角 色 与 产品 进行 的 一 系列 互动 过 程 。 场 景 剧本 与 动 男 、 瘟 男 
以 及 电影 中 故事 版 的 莉 述 方法 比较 相似 ， 主 要 是 以 藻 事 性 的 文字 、 图 像 、 
影像 等 多 种 表达 方式 勾勒 出 用 户 使 用 产品 时 的 环境 信息 。 设 计 师 通过 故事 
中 的 场景 ， 站 在 用 户 的 角度 评 信 现 有 设计 概念 与 用 户 需 来 的 匹配 程度 。 场 
景 剧本 不 仅 能 帮助 应 用 开发 团队 寻找 用 户 的 具体 需求 以 及 用 户 在 使 用 应 用 
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过 程 中 或 竺 解决 的 问题 ， 还 能 帮助 完善 产品 概念 ， 验 证 设计 的 可 行 性 。 和 看 


发 现 产 品 问题 ， 则 团队 成 员 可 以 进行 及 时 的 调整 。 

在 从 骨架 发 展 到 人 物 角色 的 过 程 中 需要 注意 以 下 5 个 要 点 . 

由 给 人 物 角色 命名 要 避免 使 用 团队 成 员 的 名 字 、 名 人 的 名 字 或 者 带 
有 消极 意义 的 名 字 ， 要 尽量 选取 容易 记忆 、 独 特 和 别致 的 名 字 。 

@) 需要 为 每 一 个 人 物 角色 配 上 照片 ， 避 免 使 用 太 过 正式 或 职业 的 照 
片 。 通 单 选 取 一 张 或 两 张 照 请 为 宜 。 

(3) 在 选择 人 物 角色 的 具体 特征 时 ， 尽 量 在 可 选 范围 内 挑选 合 情 理 、 
可 信 并 有 意义 的 细节 属性 。 

(4 场景 剧本 中 故事 的 叙述 一 般 都 使 用 第 三 人 称 和 主动 语 态 。 故 事 描 
述 的 长 度 要 适中 ， 避 免 过 长 或 过 短 。 

(3) 在 场景 剧本 中 ， 尽 量 选择 有 利于 使 人 物 角 色 看 起 来 更 真实 和 合理 
的 细节 ， 避 人 免 使 用 容易 引起 强烈 情感 反应 的 细节 。 

( 6 ) 验证 人 物 角 色 

这 一 阶段 是 人 物 角色 模型 创建 的 最 后 阶段 ， 为 了 保证 人 物 角色 能 反映 
数据 中 关于 目标 用 户 的 精髓 信息 ， 团 队 需 要 再 次 检查 人 物 角 色 中 各 个 模块 
的 真实 性 与 合理 性 ， 避 免 人 物 角色 与 最 初 的 数据 相差 太 远 。 验 证 人 物 角色 
主要 包括 以 下 7 种 方法 : 

(D 团队 成 员 通 过 浏览 原始 数据 ， 验 证 人 物 角 色 与 其 匹配 程度 并 对 人 
物 角色 进行 一 些 合 理 修 改 。 

@) 请 与 用 户 最 接近 的 专家 审查 人 物 角色 。 

(3) 请 与 人 物 角 色相 符 的 真实 用 户 审查 人 物 角 色 。 

出 访问 与 人 物 角色 相似 的 较 高 层级 用 户 。 

@) 从 人 物 角 色 资 料 产生 筛选 标准 。 

(6) 招募 代表 并 对 其 进行 访问 。 

(CO 进行 大 样本 调查 或 访谈 。 


4.3.3” 呆 例 : 中 文子 习 应 用 的 人 物 角 色 模 型 


中 文学 习 应 用 的 人 物 角 色 模 型 如 下 : 


小 设计 大 思维 





移动 应 用 界面 的 设计 方法 与 实践 


(1) 基本 信息 


。 姓 名 : Bobby 
“用 户 细 分 段 : 喜爱 并 关注 智能 手机 
该 中 文学 习 应 用 的 中 间 用 户 


(2 ) 个 人 信息 

。 年龄 : 29 

性 别 : 男 

。 星座 : 双子 座 

”职业 : 自由 插画 师 

。 所 在 城市 : 纽约 

。 爱 好 : 打 篮 球 、 看 电影 和 动画 片 、 交 友 、 研 究 中 国文 化 

。 性格 : 开朗 、 乐 观 

。 恺 惯 的 事物 : 战争 、 世 界 末 日 

。 教 育 背景 : 大 学 本 科 

。 家庭 情况 : 父亲 、 母 亲 、 妹 妹 、 一 条 狗 

。 婚 姻 情 况 : 未 婚 

。 所 用 移动 设备 及 对 技术 的 熟悉 情况 : 拥有 一 部 iPhone 5S， 对手 
机 内 已 经 购买 下 载 过 的 应 用 非常 熟悉 

。 喜欢 的 移动 应 用 : Facebook、Whatsapp 

。 对 移动 应 用 的 看 法 : 目前 的 移动 应 用 种 类 繁多 ， 但 真正 适合 他 并 
人 他 喜欢 比较 特别 、 有 趣 和 有 意义 的 

动 应 用 


(3 ) 与 中 文学 习 应 用 相关 的 信息 


。 目标 : 由 于 Bobby 非 常 热 爱 中 国文 化 ， 也 喜欢 到 中 国旅 行 以 及 结 
交 中 国 的 朋友 ， 因 此 他 希望 找到 一 个 有 效 和 有 趣 的 途径 去 学 习 中 
文 。 他 希望 有 一 种 工具 能 在 中 国旅 行 时 使 用 ， 如 提供 简单 的 对 
话 和 购物 指导 、 英 译 中 及 时 翻译 功能 、 遇 到 紧急 情况 ( 如 受伤 、 
物品 被 盗 、 被 欺诈 ) 的 帮助 功能 等 。 

。 问题 : 网 络 上 有 很 多 关于 学 习 中 文 的 网 站 及 应 用 ， 但 他 不 知道 如 
何 选择 。 他 购买 了 一 些 关 于 中 文学 习 的 书籍 读物 却 感觉 太 过 于 枯 
pesca 。 当 他 学 习 到 一 点 中 文 后 ， 却 不 知 如 何在 合适 的 场合 和 

景 下 使 用 。 


(4) 人 物 角 色 场 景 剧本 


景 剧本 一 : 周末 晚上 8:00，Bobby 在 纽约 的 家 中 打开 购买 的 中 
文学 习 指 导 书 ， 一 边 学 习 发 音 ， 一 边 用 马克 笔 练 习 中 文字 的 书 
写 。 由 于 学 习 太 过 枯燥 ， 他 开启 并 播放 了 iPhone 中 的 音乐 。 半 小 
时 后 ， 有 朋友 向 他 推送 了 一 条 有 趣 的 新 闻 ， 他 拿 起 iPhone 5 用 手 
指 滑动 手机 屏幕 解锁 并 点 开 那 条 新 闻 查 看 具体 内 容 ， 十 分 钟 后 他 
与 朋友 用 Facetime 基 于 之 前 这 条 新 闻 进 行 语音 视频 聊天 ， 在 聊天 
的 过 程 中 他 晤 了 晤 中 文学 习 指 导 书 并 最 终 决 定 将 书 合 上 ， 准备 明 
晚 再 抽 时 间 学 习 ， 并 继续 与 朋友 聊天 。 

。 场 景 剧本 二 : 一 个 秋天 的 下 午 ，Bobby 独 自 一 人 在 北京 香山 旅行 ， 
他 背 着 一 个 双肩 旅行 包 ， 手 拿 一 本 英文 指导 手册 。 在 登山 途中 他 突 
然 想 去 洗手 间 ， 他 用 不 标准 的 中 文 和 肢体 语言 问 了 几 个 路 人 后 才 找 
到 了 洗手 间 。 

。 场景 剧本 三 : Bobby 与 两 位 朋友 来 到 西安 看 兵马俑 ， 一 位 友人 的 背 
包 被 小 偷 用 工具 划 开 ， 里 面 的 钱包 与 护照 等 重要 物品 被 盗 ， 在 惊慌 
失措 之 下 去 找 管理 人 员 说 明 情 况 。 由 于 语言 不 通 ， 他 们 无 法 清楚 地 
描述 情况 。 管 理 人 员 找 来 英文 导游 进行 翻译 工作 ,并 带 他 们 去 当 
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4.4 | 为 移动 用 户 设 计 的 核心 要 于 
4.4.1 ”情境 的 影响 因素 


在 日 常生 活 中 ， 人 们 的 一 举 一 动 、 一 言 一 行 都 容易 受到 周边 或 自身 多 
重 因素 的 影响 。 例 如 ， 当 开 开 心心 地 与 朋友 到 餐厅 用 餐 时 ， 服 务 员 态度 恶 
劣 就 会 影响 整个 用 餐 的 体验 ， 也 许 再 也 不 会 光顾 这 家 餐厅 ; 当下 雨天 走 在 
大 马路 上 ， 一 辆 飞驰 而 过 的 汽车 将 泥水 溅 了 一 身 时 ， 可 能 会 因此 而 郁闷 一 
整 天 或 者 改变 行程 计划 ; 当 与 人 争吵 后 回 到 家 中 ， 会 在 无 形 中 将 这 种 坏 情 
绪 市 给 家 人 ， 从 而 有 可 能 引起 男 外 一 场 争论 。 

而 人 在 移动 中 使 用 移动 应 用 的 情境 则 更 为 复杂 ， 因 为 任何 在 移动 环境 中 
对 移动 应 用 的 操作 都 容易 受到 各 种 外 部 因素 的 影响 。 神 经 学 研究 表明 ， 环 境 
对 认 知 有 看 重要 影响 ， 环 境 的 改变 可 以 影响 大 脑 ， 进 而 影响 行为 。 

情境 ( Context ) 是 环境 及 其 他 一 切 能 影响 用 户 与 产品 交互 的 因素 。 谭 浩 
博士 ”将 情境 定义 为 人 在 一 定 的 环境 和 条 件 下 进行 某 种 活动 的 相关 因素 和 信息 
的 综合 ， 是 一 种 在 记忆 中 构建 的 心理 表征 。 由 于 心理 表征 是 外 部 事物 在 心理 活 
动 的 内 部 再 现 ， 因 此 其 具有 动态 性 的 特点 。Schil 让 ”等 人 认为 情境 包含 的 不 仅 
仅 是 用 户 的 地 点 ， 因 为 用 户 所 关心 的 其 他 事物 同样 是 移动 和 变化 的 。 情 境 还 包 
括 光 线 、 噪 声 等 级 、 网 络 连通 性 其 至 社会 现状 。 人 、 产 品 和 环境 是 构成 用 户 情 
境 的 三 大 模块 。 因 此 ， 可 以 认为 移动 应 用 界面 任务 模型 中 的 情境 因素 主要 由 客 
观 因 素 和 主观 因素 两 个 部 分 组 成 。 客 观 因素 包含 移动 设备 、 移 动 应 用 和 环境 的 
影响 因素 ， 主 观 因素 则 是 用 户 在 使 用 环境 中 的 心理 因素 ( 见 图 4-13 )。 





4-13 ”移动 应 用 情境 的 影响 因素 


小 设计 大 思维 





移动 应 用 界面 的 设计 方法 与 实践 


(1 ) 客观 因素 ( 见 表 4-6 ) 


表 4-6 ”移动 应 用 任务 模型 中 情境 的 客观 影响 因素 
具体 影响 因素 

移动 设备 设备 性 能 、 设 备 样 式 (触摸 或 按键 ) 

设备 屏幕 屏幕 大 小 、 屏 送 清 晰 程度 


移动 应 用 


网 络 网 络 接 入 能 力 与 接 入 方式 、 网 速 


物理 环境 用 户 所 处 地 理 位 置 、 目 然 环境 


时 间 用 户 使 用 应 用 的 时 间 





移动 设备 的 性 能 、 用 户 与 设备 的 交互 方式 ( 触摸 、 按 键 等 )、 屏 幕 的 
大 小 和 清晰 程度 以 及 网 络 接 入 情况 都 会 影响 用 户 使 用 移动 应 用 时 的 体验 。 
而 应 用 的 开局 速度 、 运 行 速 度 、 内 容 、 界 面 交 互 方式 、 视 觉 界 面 等 因素 会 
影响 用 户 对 应 用 的 印象 、 情 绪 以 及 下 一 步 操 作 决 策 。 因 此 ， 民 好 的 移动 应 
用 要 保证 恨 好 的 运行 速度 、 拥 有 能 吸引 用 户 操 作 的 视觉 界面 以 及 能 快速 帮 
助 用 户 达 到 目标 的 简易 交互 流程 。 

物理 环境 指 自然 环境 或 用 户 所 在 的 地 理 位 置 ， 它 影响 用 户 访问 移动 应 
用 和 获取 信息 的 方式 。 例 如 ， 用 户 在 小 型 汽车 或 私家 车 中 会 进行 比较 私密 
的 操作 ， 如 查看 账单 、 股 票 等 ， 而 在 公交 车 、 地 铁 等 公共 交通 工具 环境 中 
会 进行 不 太 重 要 的 操作 ， 如 玩 游 戏 、 看 新 闻 等 。 

Jupeter lee 通过 实验 分 别 测 量 了 嘲 杂 、 吗 暗 和 行走 的 不 同 手机 操作 
环境 ， 对 用 户 的 认 知 水 平 、 操 作 绩 效 和 主观 体验 造成 的 有 影响。 实验 结 果 表 
明 : 在 哮 杂 环境 中 ， 用 户 的 认 知 情况 与 普通 环境 中 会 有 很 大 差别 ， 但 噪声 
对 用 户 的 操作 绩效 和 体验 程度 影响 不 大 ， 因 此 设计 师 需 要 充分 考虑 用 户 认 
知 水 平 较 低 的 因素 ， 合 理 安 排 这 种 情境 下 应 用 界面 的 信息 量 ， 尽 量 减少 界 
面 中 的 干扰 。 在 昏暗 环境 中 ， 用 户 的 认 知 情况 、 操 作 绩 效 和 用 户 体 验 与 正 
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单 情况 下 没有 太 大 差别 ， 因 此 在 实际 的 界面 设计 中 ， 设 计 人 员 需 要 更 加 深 
入 地 了 解 用 户 的 体验 需求 ， 如 调整 屏幕 亮度 、 界 面 风 格 等 。 在 行走 环境 
中 ， 用 户 的 认 知 情况 、 操 作 绩 效 和 用 户 体验 差别 不 显著 ， 但 是 相 比 其 他 两 
种 情境 ， 在 该 情境 中 用 户 的 操作 绩效 与 正常 情况 下 的 区 别 是 显著 的 。 因 
此 ， 设 计 师 在 实际 的 设计 中 需要 重点 考虑 行走 过 程 中 用 户 的 深度 需求 和 操 
作 习 惯 ， 从 而 调整 界面 的 内 容 结构 和 简化 任务 的 交互 流程 ， 提 逢 用户 对 应 
用 的 体验 。 

Luke Wroblewski ”通过 实验 研究 发 现 用 户 在 家 使 用 手机 的 频率 最 高 ， 
达到 84%; 其 次 是 利用 一 天 中 各 种 碎片 化 的 时 间 使 用 手机 ， 达 到 80%。 其 
他 的 地 点 使 用 手机 频率 从 高 到 低 的 排名 依次 是 : 排队 等 候 ( 76% )、 购 物 
( 69% )、 工 作 ( 64% )、 看 电视 ( 62% )、 上 下 班期 间 ( 47% )。 因 此 ， 设 计 师 
要 综合 应 用 的 特 挟 ， 考 虑 用 户 在 不 同 物理 环境 中 使 用 应 用 的 方式 和 偏好 ， 
以 提升 应 用 的 操作 体验 。 

通过 对 20 个 移动 用 户 的 抽样 调查 ， 发 现 移动 用 户 在 早晨 6 一 8 点 、 
下 午 5~6 点 ， 有 晚上 8 一 11 点 使 用 移动 应 用 的 频率 最 高 。 用 户 一 般 利 用 
上 下 班 过 程 中 在 车 站 、 地 铁 关 等 车 的 时 间 使 用 音乐 、 新 闻 及 社交 类 应 
用 ; 晚上 则 一 般 宅 在 家 中 购物 、 看 电影 或 打 游 戏 。 从 图 4-14 中 可 以 看 
出 ， 除 了 地 点 以 外 ， 时 间 也 作为 物理 环境 的 一 个 辅助 因素 影响 用 户 的 使 


用 情境 。 







地 点 / 
新 降 电影 游戏 
Ry 
音乐 新 六 音乐 坟 仿 4 


' 时 | 
L233 4 5 G7 8® 9 1101 1 中 45 67 8 9 lI0ll 2 
AM PM 


4-14 用户 使 用 移动 应 用 的 频率 
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(2 ) 主观 因素 ( 见 表 4 一 7 ) 
表 4-7 移动 应 用 任务 模型 中 情境 的 主观 影响 因素 


和 : 





具体 影响 因素 


知识 背景 知识 经 验 的 组 织 、 用 户 的 知识 背景 





i 用 户 的 思维 习惯 、 使 用 行为 习惯 


内 在 能 力 视觉 灵敏 度 、 感 知识 别 、 技 能 记忆 
判断 与 正确 性 的 关系 

情绪 与 记忆 、 识 别 、 焦 不 与 注意 
用 户 对 任务 的 期 望 


主观 因素 是 用 户 在 特定 时 间 相 地 点 使 用 移动 应 用 时 的 心理 因素 。 主 观 
因素 包 打 用 户 的 视 沉 感知、 记忆、 知识 育 景 、 认 知 特性 、 轧 维 及 行为 习 
惯 、 经 验 、 当 时 的 情绪 特 点 、 对 任务 的 期 己 和 态度 等 。 

例如 ， 用 户 在 吐 杂 和 拥 壕 的 公共 交通 环境 中 使 用 移动 应 用 时 ， 石 网络 
接 入 速度 较 慢 ， 移 动 设备 及 应 用 的 运行 能 力 较 弱 则 容易 使 用 户 产 生 人 负面 情 
绪 ， 但 这 种 负面 情绪 的 发 生 又 与 用 户 知 识 、 修 养 、 使 用 经 验 、 对 任务 的 期 
望 相 态 度 相 关 。 

由 此 可 以 得 出 任务 模型 情境 因素 中 的 主观 因素 是 由 用 户 自身 素质 和 心 
理 状 态 所 决定 的 ， 同 时 也 受到 客观 因素 的 有 影响。 因此， 产品 研发 团队 在 产 
品 任务 模型 构建 的 时 候 需 要 充分 考虑 用 户 的 使 用 情境 及 其 心理 活动 特征 ， 
为 后 续 界 面 设计 的 实施 提供 相关 的 研究 基础 。 


4.4.2 ”做 减法 、 做 曾 法 与 组 织 


(1 ) 做 减法 与 做 简 法 
结合 移动 情境 为 移动 用 户 设 计 ， 就 是 要 将 一 个 界面 进行 精致 地 勇 裁 ， 
将 最 核心 的 内 容 展现 在 用 户 面 前 ， 使 用 户 无 须 过 多 思 若 就 能 进行 顺畅 操 
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作 。 减 挥 应 用 中 所 有 不 必要 出 现 的 信息 与 功能 ( 这 里 所 说 的 减 挥 不 仅 仪 只 
删除 ， 还 包含 隐藏 的 意思 )， 将 核心 体验 做 到 极致 

如 果 说 “做 减法 ”是 针对 设计 师 提 出 的 设计 要 求 ， 那 么 “做 简 法 ” 则 
是 设计 师 完 全 熙 在 用 户 的 视角 ， 使 用 户 通 过 简单 的 操作 而 感到 愉悦 和 自 
信 ， 降 低 用 户 的 认 知 负荷 。 当 然 ，“ 做 简 法 ”是 在 保证 易 用 性 的 前 提 下 进 
行 的 。 前 田 约 翰 ( John Maeda ) “在 《简单 法 则 》 ( The Laws of 
Simplicity ) 一 书 中 提出 了 简单 设计 原则 ， 即 要 简化 一 个 系统 不 必要 的 功 
能 ， 妥 善 组 织 和 管理 应 用 内 部 的 各 个 要 素 ， 缩 短 用 户 操作 和 等 竺 的 时 间 。 
从 而 提升 用 户 对 应 用 的 信任 感 ， 降 低 用 户 的 认 知 成 本 ， 使 简单 和 复杂 相 辆 
相 成 。 "简单 就 是 减少 明显 的 ， 增 加 有 意义 的 ”。 

意大利 经 济 学 家 维尔 弗 雷 多 ， 由 雷 托 ( Vilfredo Pareto) 于 19 世 
纪 末 20 世纪 初 提 出 了 二 八 原 则 ( The 80-20 Rule， 又 名 Pareto S 
Prin-ciple ) “。 他 认为 在 所 有 的 系统 中 (如 经 济 、 和 管理、 工程 、 设 
计 )， 约 80% 的 效果 ， 是 由 20% 的 系统 变量 造成 的 。 用 户 体 验 经 济 学 也 
提出 ， 精 心 打 磨 的 20% 主 要 设计 模块 ， 会 市 来 80% 的 主要 收益 。 二 八 原 
则 体现 在 为 移动 用 户 设 计 的 核心 思想 是 : 呈现 给 用 户 的 所 有 功能 中 ， 
最 重要 的 只 占 其 中 一 小 部 分 ， 约 为 20%， 其 余 80% 尽 管 是 多 数 ， 却 相对 
次 要 ( 见 图 4-15 )。 因 此 ， 本 市 所 说 的 减法 和 简 法 ， 实 际 上 是 名 望 设 
计 师 能 够 将 80% 的 时 间 、 人 力 和 资源 用 在 20% 的 主要 功能 设计 中 ， 将 核 
心 体验 做 到 最 好 ; 将 其 余 80% 的 非 关 键 性 功能 做 减法 ， 甚 至 移 除 ， 以 便 
有 效 地 展现 核心 功能 。 








核心 体验 
主要 功能 
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在 实际 的 设计 工作 中 发 现 ， 越 是 无 限制 地 增加 功能 ， 就 越 难 发 现 真正 
对 用 户 有 实际 意义 和 价值 的 功能 。 若 一 个 移动 应 用 拥有 过 于 庞大 的 内 容 体 
积 ， 它 便 很 难 灵 活 应 变 整 个 市 场 的 需求 变化 ， 而 所 耗费 的 人 力 、 物 力 资源 
也 会 更 多 。 因 此 ， 精 简 是 做 好 一 个 移动 产品 的 关键 词 。 

(2) 组织 

提 到 组 织 ， 人 们 想到 的 是 将 混乱 、 复 杂 的 事物 进行 重新 排列 、 组 
合 ， 从 而 使 事物 看 起 来 更 加 具有 条 理性 。 本 节 提 到 的 组 织 是 希望 设计 
币 能 将 移动 应 用 中 复杂 的 信息 和 功能 划分 成 组 ， 并 对 这 些 信 息 功 能 组 
进行 合理 的 排 布 ， 为 用 户 管理 和 使 用 信息 与 功能 提供 帮助 。 乔 治 A… 米 
勒 (George A. Miller)” 于 1956 年 提出 人 脑 在 短 时 间 内 处 理 信 息 的 能 
力 有 限 ， 一 般 一 次 只 能 记 住 5 一 9 个 事物 ， 因 此 被 称 为 7 土 2 原则 。 在 
移动 应 用 中 ， 这 一 理论 常 被 用 来 组 织 和 限制 导航 菜单 数量 ( 详 见 
5.2.3 ) 。 人 例如， 浏览 器 的 选项 卡 一 般 不 超过 7 个 ， 避 免 不 必 要 的 认 知 
负担 。 图 4-16 所 示 为 iPad 百度 的 主页 面 ， 其 选项 卡 在 一 屏 以 内 显示 
的 上 限 是 6 个 。 


iPad 全 22:04 @ 7% 
Bai 并 百度 eb 大 牌 街 -品牌 爱 梦想 ,去 旅 和 天 猫 超市 人 @@ 天 猫 电器 城 - + 乞 


= 


Baidty 百度 





4-16 ipad 百度 主页 面 


此 外 ， 麦 肯 锡 国际 管理 咨询 公司 的 咨询 顾问 巴巴 拉 ， 明 托 ( Barbara 
Minto ) 还 发 明了 人 金字塔 原理 ( Pyramid Principles )。 这 套 原 理 最 初 用 


于 文章 写作 中 ， 它 阐述 了 主要 思想 是 从 次 要 思想 中 概括 而 来 ， 因 此 文章 中 
所 有 思想 的 理想 结构 形成 了 一 个 金字 塔 结构 ， 即 由 一 个 总 的 思想 统领 多 组 
思想 。 
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根据 上 述 原 理 ， 为 移动 用 户 进行 设计 需要 找到 关键 用 户 、 关 键 需 
关键 任务 、 关 键 信息 ， 才 能 合理 组 织 内 容 并 设 定 任务 的 优先 级 ， 依 
次 提供 合适 的 设计 方案 。 例 如 ， 功 能 型 应 用 需要 ee 
将 与 之 相关 的 信息 进行 优先 级 排序 ， 并 在 强调 简洁 的 基础 上 尽量 减少 
面 之 可 的 跳 转 。 

图 4-17 所 示 是 优酷 应 用 在 同 平 全 不同 终 问 中 的 界面 公 计 截图。 优 
酷 的 核心 业务 是 视频 ， 因 此 iphone 端 优酷 的 首页 着 重 展现 与 视频 相关 
的 缩 略 图 、 标 题 等 信息 ， 并 将 它们 设计 得 足够 大 以 方便 用 户 点 击 。 而 
视频 的 展现 也 依据 PC 站 与 iPad 端的 逻辑 ， 将 系统 推荐 的 视频 放 在 最 前 
面 ， 往 下 滑动 后 便 能 看 到 电视 剧 、 韩 剧 等 其 他 视频 信息 。 当 然 ， 设 计 
A A 
、 移 动情 境 的 主客 观 因 素 都 是 设计 时 需要 重点 考量 的 影响 因素 。 每 
le 
户 体 验 。 





Et > 桌面 端 


mtd 视频 库 | 播放 器 个 人 中 心 、 杭 频 管理 





4-17 优酷 应 用 在 PC、ipad、iphone 端的 不 同 设计 
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4.5 ] 任务 模型 的 构建 


4.5.1 ”任务 模型 及 其 类 型 


任务 就 是 为 了 达到 采种 目的 而 进行 的 操作 内 容 。 任 务 在 游戏 中 比较 前 
见 ， 如 想 要 过 一 道 关 卡 就 必须 完成 一 项 或 多 项 任务 ， 级 别 越 高 任务 难度 就 
越 大 。 

任务 是 在 计算 机 环境 中 的 一 种 基本 工作 单位 的 专业 术语 ， 它 包含 任 
务 名 称 、 任 务 类 型 、 父 任务 、 子 任务 、 任 务 对 象 、 任 务 吓 人 循环 、 任 务 
是 否 可 选 、 任 务 的 初始 活动 集 、 任 务 的 结束 活动 集 9 项 属性 “。 不 仅 如 
此 ， 各 个 任务 之 间 还 存在 着 各 种 时 序 关 系 。 例 如 ， 次 序 关 系 ， 两 个 任务 
可 以 按 任 意 次 序 执行 ， 但 同一 时 间 只 能 有 一 个 任务 执行 ， 并行 关系 ， 两 
个 任务 之 间 可 以 任意 执行 ， 没 有 约束 ; 顺序 关系 ， 第 二 个 任务 必须 在 第 
一 个 任务 执行 后 才能 开始 ; 中断 关系 ， 第 二 个 任务 可 以 在 第 一 个 任务 执 
行 过 程 中 开始 运行 ， 这 时 第 一 个 任务 停止 运行 ， 当 第 二 个 任务 结束 时 ， 
第 一 个 任务 恢复 运行 。 

任务 模型 是 关于 用 户 与 应 用 交互 过 程 中 行为 信息 的 模型 ， 用 于 搬 述 用 
户 在 界面 操作 中 的 一 系列 动作 。 对 任务 模型 的 分 析 是 将 用 户 模型 和 人 物 角 
色 和 模型 细 化 成 用 户 在 使 用 移动 应 用 时 的 具体 操作 和 界面 层级 。 任 务 模 型 分 
析 的 目的 是 为 了 全 面 芳 虑 用 户 操作 时 的 真实 需要 ， 也 就 是 研究 界面 的 可 用 
性 问题 。 

任务 模型 包括 程序 分 析 、 工 作 分 析 、 工 作 流 程 分 析 和 错误 分 析 4 
种 类 型 。 程 序 分 析 是 用 户 完 成 任务 所 遵循 的 后 合 技术 。 工 作 分 析 是 确 
认 有 用户 作 为 工作 角色 为 达到 菜 些 总 体 目 标 所 要 完成 的 所 有 任务 。 工 作 
流程 分 析 是 用 来 出 试 完 成 任务 流程 所 需 的 信息 流 和 控制 内 容 ， 可 能 包 
括 多 个 任务 和 多 个 人 。 争 误 分 析 决 定 稍 误 将 发 生 的 地 氮 、 时 间 和 实际 
情况 。 设 计 师 在 对 任务 进行 改 恨 时 要 先 对 任务 育 后 的 程序 进行 了 解 ， 
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再 分 析 工 作 及 工作 流程 ， 并 同时 记录 和 分 析 任 务 执行 中 的 销 误 ， 最 后 
进行 任务 改进 。 


4.5.2” 现 有 任务 模型 构建 万 法 的 比较 分 析 


现 有 任务 模型 构建 方法 可 以 概述 为 HTA、UAN、GOMS 三 种 。 

(1 ) HTA 

HTA ( Hierarchical Task Analysis ) 是 Annett 和 Duncan “于 1976 年 
开发 的 任务 分 析 和 描述 模型 。 它 有 有 两 种 任务 表现 方式 : 结构 文本 和 树 形 结 
构图 。 树 形 结构 图 中 的 方 框 代表 操作 ， 半 形式 化 文本 表示 计划 。 操 作 表 示 
任务 ， 而 计划 表示 任务 之 则 的 顺序 和 关系 。HTA 法 的 局 限 性 在 于 只 能 表现 
各 个 任务 对 象 间 的 选择 和 循环 关系 。 

(2) UAN 

UAN ( User Action Notation ) “主要 描述 用 户 行为 的 顺序 以 及 在 执 
行 任务 时 所 用 的 界面 ， 它 能 帮助 设计 师 摘 述 复杂 的 用 户 任务 和 界面 层 
级 。 扎 采用 表格 形式 记录 用 户 行 为 、 页 面 反 包 以 及 界面 内 部 状态 的 变 
化 。 在 UAN 模型 中 ， 界 和 面 被 分 为 一 些 类 似 层 次 结构 的 异步 任务 ， 用 户 行 
动 的 关联 性 和 时 序 性 关系 由 表格 的 行列 对 齐 关 系 相 从 上 至 下 、 从 左 至 石 
的 阅读 顺序 来 确定 。 ”UAN 法 的 局 限 性 表现 在 : 中 仅 适 合 描述 单线 程 任 
务 ， 难 以 摘 述 多 条 平行 的 行为 路 径 ; 凶 UAN 模型 一 般 采 用 程序 语言 描述 
界面 状态 和 反馈 ， 这 使 得 用 户 难 以 理解 其 任务 模型 ， 仅 适合 设计 师 与 程 
序 员 之 间 的 交流 。 

( 3 ) GOMS 

GOMS ( Goals、 Operators、Methods、Selection Rules ) 是 Card、 
Moran 和 Newel1l 于 1983 年 开发 用 于 描述 用 户 任务 执行 的 分 析 方 法 。 
GOMES 模型 法 来 自 认 知心 理学 ， 是 关于 用 户 与 应 用 系统 界面 交互 时 使 用 
的 知识 和 认 知 过 程 的 模型 。 目 标 ( 6oals ) 代表 用 户 尝 试 完成 任务 时 想 
要 得 到 的 结果 ; 操作 ( 0perators ) 是 用 户 为 了 完成 任务 而 必须 执行 的 
一 系列 动作 ; 方法 ( Methods ) 是 用 户 操作 的 序列 ， 以 组 合 形式 集合 到 
一 起 来 达成 单一 的 目标 。 选 择 规 则 ( Selection Rules ) 是 用 户 要 遵守 的 
判定 规则 ， 以 确定 在 特定 环境 下 为 了 达到 目标 所 选择 的 方法 。60M3 模 
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型 有 四 种 变 体 : KLM ( Keystroke-Leve1 Model) 、CMN=-G0OMS、NGOMSL、 
CPM-GOMS。 ”KLM 是 基于 按键 的 操作 模型 ， 没 有 目标 、 方 法 和 选择 的 规 
则 ,CMN 一 GOMS 定义 了 层次 关系 、 操 作 以 及 选择 规则 的 方法 ; NGOMSL 是 
比较 严格 的 任务 分 析 方 法 ， 豆 励 采 用 计算 机 编程 语言 进行 任务 模型 建 
构 ; CPM-6G0MS 主要 用 来 摘 述 基于 窗口 的 用 户 界 面 中 不 同 操作 项 目的 并 
行 任务 。 

GOMS 模型 体系 的 局 限 性 主要 体现 在 以 下 两 个 方面 : 由 GOMS 模型 中 
的 方法 不 仅 多 ， 并 且 各 个 方法 之 间 的 差别 较 大 ， 研 究 人 员 或 设计 师 很 难 选 
择 一 种 方法 进行 快速 的 模型 建构 工作 ; @) 60MS 模型 只 适用 于 任务 顺序 被 
事先 安排 好 的 系统 ， 无 法 支持 系统 错误 情况 的 处 理 。 

因此， 每 一 种 方法 在 描述 界面 任务 中 都 有 其 长 处 ,但 同时 也 存在 局 
限 性 。 设 计 师 应 该 以 用 户 任务 为 中 心 ， 根 据 应 用 的 具体 情况 将 以 上 几 种 
方法 的 长 处 结合 起 来 共同 构建 移动 应 用 的 任务 模型 。 例 如 ， 首 先 运用 
GOMS 方法 的 原理 进行 基础 任务 分 解 ， 建 立 基 本 的 行为 模型 ， 而 具体 的 子 
任务 则 由 UAN 方法 来 描述 ， 最 后 再 用 HTA 法 中 的 树 形 结构 图 将 具体 任务 
表现 出 来 。 与 此 同时 ， 当 产品 研发 团队 在 任务 进程 中 发 现 错误 时 还 要 进 
行 及 时 修改 。 

三 种 任务 模型 构建 方法 比较 分 析 表 ， 见 表 4-8。 





表 4-8 三 种 任务 模型 构建 方法 比较 分 析 表 


MR 结构 文本 或 。 只 能 表现 各 个 任务 对 象 间 
任务 分 析 和 描述 者 树 形 结构 图 的 选择 和 循环 关系 
有 仅 适 合 描述 单线 程 任务 
田 还 体 义 时 山 肆 站 
UAN 以 及 在 执行 任务 时 所 用 表格 采用 程序 语言 的 描述 方式 


HTA 


| 仅 适合 设计 师 与 程序 员 之 间 
的 直面 的 交流 


_GOMS 僵 型 家 族 中 的 方法 
加 结构 文本 较 多 ， 且 方法 之 间 的 差异 较 
GOMS 描述 应 用 任务 的 执行 或 者 图 形 大 
仅 适用 于 任务 顺序 被 事先 
安排 好 的 系统 
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4.5.3 ”任务 模型 的 构建 步骤 和 要 扣 


依据 上 文 任务 模型 构建 方法 研究 ， 结 合 自身 的 设计 实际 经 验 以 及 移动 
应 用 的 特点 总 结 出 了 任务 模型 建构 的 三 个 步骤 ， 任 务 分 解 、 任 务 描述 和 任 
务 细 化 。 

( 1 ) 任务 分 解 

任务 分 解 就 是 分 析 用 户 执行 任务 的 目的 、 线 索 、 方 法 以 及 在 多 个 项 
中 选择 其 中 一 项 的 原因 等 。 设 计 师 可 以 采用 60MS 法 进行 任务 分 解 ， 从 目 
标 、 操 作 、 方 法 、 选 择 规则 4 个 方面 进行 用 户 基 本 行为 建构 。 用 户 目标 
可 以 从 一 个 总 目标 发 散 成 为 多 个 子 目标 ， 为 了 实现 子 目标 就 需要 将 子 任务 
进行 组 织 和 连接 。 

首先 基于 单个 子 目标 将 其 功能 与 用 户 行为 分 解 成 多 个 子 任务 ， 子 任 
务 再 分 解 成 其 他 子 任务 ， 直 到 任务 分 解 完毕 ， 停 止 任务 分 解 的 时 机 取决 
于 用 户 对 界面 功能 的 理解 程度 以 及 用 户 是 否 能 达到 目标 为 标准 。 在 任务 
分 解 过 程 中 ， 设 计 师 还 要 考虑 用 户 的 操作 方式 、 执 行 任务 以 及 任务 之 间 
的 罗 辑 规则 等 因素 ， 以 帮助 用 户 快速 达到 目标 。 最 终 的 输出 结果 可 以 采 
用 HTA 法 中 的 结构 文本 图 、 树 形 结构 图 或 者 其 他 能 清晰 表明 任务 模型 结 
构 的 图 或 者 表格 。 

( 2 ) 任务 描述 

任务 描述 不 仅 要 符合 用 户 行为 操作 的 客观 情况 ， 还 要 符合 目标 用 户 认 
知 的 特性 。 任 务 描述 工作 应 该 与 任务 分 解 同时 进行 ， 并 随 着 项 目 进展 进行 
不 断 修改 。 因 此 ， 任 务 描述 是 一 项 较为 谨慎 的 长 线 工 作 ， 设 计 人 员 要 考虑 
任务 表达 的 简洁 性 、 易 学 性 和 客观 性 ， 避 免 出 现 语意 含糊 、 词 不 达意 等 错 
误 表达 情况 。 

( 3 ) 任务 细 化 

当 基本 的 任务 模型 确定 后 ， 就 要 进行 详细 的 任务 分 析 和 验证 阶段 ， 分 
析 内 容 主 要 包括 任务 实现 的 技术 可 能 性 、 任 务 的 执行 顺序 、 任 务 执行 的 时 
间 、 任 务 的 循环 等。 

移动 应 用 任务 模型 的 构建 还 需要 注意 以 下 几 个 方面 ， 
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人 要 重点 分 析 人 物 角色 在 使 用 该 应 用 过 程 中 最 常用 的 功能 需求 。 

@ 任务 分 解 必须 按照 从 整体 到 细节 的 原则 进行 ， 先 将 完整 的 
务 模型 建构 出 来 ， 再 推 殴 具体 细节 ， 各 免 过 早 陷入 细节 思考 而 脱离 整 
体 设计 。 

@@ 若 条 件 允 许 ， 在 完成 任务 模型 建构 后 邀请 目标 用 户 进行 任务 操作 
测试 ， 以 验证 任务 设计 的 合理 性 和 体验 的 流畅 性 。 


全 


和 


4.5.4 对 例 分 析 : 中 文子 习 应 用 的 任务 模型 


中 文学 习 应 用 是 作者 参与 并 负责 的 一 巩 前 瞻 性 的 概念 设计 项 目 ， 该 应 
用 是 基于 平板 电脑 设备 而 开发 的 ， 获 得 了 2010 年 第 二 届 “ 天 警 杯 ”国际 
工业 设计 创新 大 赛 数字 产品 与 服务 设计 银 奖 的 殊荣 。 本 市 主要 分 析 该 中 文 
学 习 应 用 的 任务 模型 。 

此 款 应 用 的 目标 是 帮助 国外 用 户 进 行 汉语 学 习 ( 普通 学 习 、 趣 味 性 
学 习 、 情 境 学 习 和 在 线 学 习 ) ， 以 及 在 学 习 汉 语 的 同时 了 解 中 国文 
化 。 因 此 ， 中 文学 习 是 该 应 用 的 总 体 目 标 ， 为 了 实现 这 个 总 体 目标 可 
以 将 应 用 划分 为 4 个 子 目 标 : 中 文学 习 、 中 文 工 具 、 富 教 于 乐 与 了 解 
中 国文 化 。 

中 文学 习 可 以 分 为 基础 学 习 、 人 情境 学 习 以 及 老师 在 线 一 对 一 教学 三 
个 子 任务 。 在 基础 学 习 中 ， 有 用户 可 以 在 一 个 界面 内 查看 和 选择 拼音 / 音 
调 、 笔 国 、 词 语 和 句子 4 项 子 任务 ， 这 4 项 子 任务 之 间 疫 有 规定 的 顺序 
和 次 序 关 系 ， 因 此 基础 学 习 中 4 项 子 任务 之 间 的 关系 是 并 行 关 系 。 后 续 
的 任务 操作 必须 按照 选择 、 理 看 、 学 习 的 顺序 关系 来 完成 基础 学 习 任 
务 。 情 境 学 习 中 的 4 项 子 任务 按时 间 、 地 扣 、 事 物 、 行 为 分 类 可 以 按照 
任意 的 次 序 执行 操作 ， 但 在 同一 时 间 内 只 能 执行 其 中 一 项 操作 ， 因 此 这 
4 项 子 任务 属于 次 序 关 系 。 其 他 三 项 子 目 标的 任务 操作 均 与 中 文学 习 类 
似 ( 见 图 4-18 ) 。 
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:| 拼音 /音调 | 子 任务 1 : 
:| 笔画 ”| 子 任务 2 : 

子 任务 ! ”| 河 语 ”| 子 任务 3 : 关 
:| 甸子 | 子 任务 4 : 















二 


1 实现 ey) :| 按时 间 分 类 | 子 任务 1 : 
| 
中 文学 peooovene : = 
:| 按 行为 分 类 | 子 任务 4 所 


由 
Ey 
次 

洪 沙 慑 海 





:| 实时 拍摄 翻译 | 子 任务 1 ; 
[录音 翻译 | 子 任务 2 :六 


:| 交通 事故 | 子 任务 3 : 
| 子 任务 4 





:| 笔 刷 样式 选择 | 子 任务 1 : ， 
:[ 笔 剧 闫 色 选 择 | 子 任务 2 : 系 





|[ 基 于 地 理 位 置 推荐 | 子 任务 1 ;， 
| 游客 推荐 。 | 子 任务 2 ; 关 
| 系 帝 推荐 ] 子 任务 3 : 


4-18 任务 模型 图 
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4.6 | UT 模型 的 构建 


通过 前 文 的 论述 ， 本 章 构 建 了 移动 应 用 的 用 户 与 任务 模型 : UT ( User 
& Task ) 模型 。 该 模型 按照 用 户 模 型 一 一 人 物 角 色 模 型 一 一 任务 模型 的 违 
进 层级 天 系 形 成 从 抽象 的 用 户 心理 到 具体 的 用 户 界 面 任务 的 分 析 流 程 ， 整 
个 模型 的 核心 因素 是 移动 应 用 的 使 用 对 象 ， 即 用 户 ( 见 图 4-19 ) 。 用 户 
模型 是 人 物 角 色 模 型 的 基础 ， 人 物 角 色 模 型 是 用 户 模 型 研究 成 果 的 具体 表 
现 ， 人 物 角 色 模 型 又 是 任务 模型 的 基础 ， 任 务 模 型 是 人 物 角 色 模 型 的 行为 









表现 。 因 此 ，UT 模型 是 后 续 设 计 实 践 活动 的 基础 和 研究 依据 ， 是 贯穿 整 
个 移动 应 用 界面 设计 活动 的 核心 模型 。 
用 户 心理 与 行为 分 析 一 用 户 具 体 的 任务 实施 
Na ”模型 的 核心 BR 
认 知 模型 任务 分 解 | 
全 用 全 = 
情 从 网 时 任务 描述 3 
:过 一 | 





大 
3 
vm o> 
四 本 
wa 
“maaanemer-” 


4-19 ”移动 应 用 的 用 户 及 任务 (UT ) 模型 


4./ | 小 绍 


本 章 对 移动 应 用 用 户 需 求 层 次 的 分 析 是 从 心理 学 角度 直观 反映 用 户 对 
移动 应 用 的 期 望 ， 同 时 也 是 对 用 户 认 知 、 行 为 和 情感 模型 内 容 的 映射 。 

设计 师 需 要 根据 用 户 模 型 的 具体 表现 一 一 人 物 角 色 模 型 深度 挖 气 人物 
角色 的 隐 性 知识 ， 使 设计 师 模 型 尽 可 能 匹配 用 户 模 型 ， 让 应 用 更 加 符合 用 
户 的 心理 预期 。 在 此 基础 上 ， 应 用 研发 团队 还 需 全 面 考 虑 移动 用 户 的 特 
凡 ， 根 据 设计 的 核心 要 素 ( 如 主客 观 情境 因素 ， 做 减法 、 简 法 与 组 织 等 ) 
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进一步 分 析 人 物 角色 模型 与 应 用 交互 过 程 中 一 系列 行为 信息 以 及 与 之 相关 
的 操作 界面 层级 关系 ， 以 构建 应 用 界面 的 任务 模型 。 

从 用 户 最 基本 的 需求 层次 分 析 人 到 用 户 模 型 、 人 物 角 色 模 型 以 及 任务 模 
型 的 构建 是 一 个 用 户 研 究 递 进 的 过 程 ， 也 是 一 个 探索 目标 用 户 对 应 用 真实 
需要 的 过 程 ， 它 关系 到 应 用 功能 的 设 定 及 界面 的 易 用 性 问题 。 

最 后 ， 移 动 应 用 的 用 户 及 任务 模型 的 构建 ， 为 后 续 的 界面 交互 相 视 





说 设计 提供 了 有 关 目 标 用 户 分 析 的 研究 信息 ， 有 利于 具体 设计 活动 的 顺 
利和 开展 。 
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框 来 与 行为 一 一 交互 设计 (1) 





随 看 互联 网 技术 的 发 展 ， 交 互 不 再 仅仅 涉及 人 与 机 辟 之 间 的 互动 、 交 
流 、 沟 通 。 如 今 的 交互 对 象 沙 及 人 与 人 、 人 与 物 、 物 与 物 。 整 个 交互 环境 
变 成 一 张 网 ， 交 互 对 象 之 间 实 现 了 无 缝 链接 ( 见 图 5-1 )。 





5-1 交互 环境 


(1) 交互 设计 的 定义 

交互 设计 的 英文 是 Interaction Design， 将 “Interaction” 拆 开 ， 
“action” 指 动作 ， 而 inter 指 反 馈 ， 一 个 动作 一 个 反馈 形成 一 个 交互 过 
程 ， 多 个 交互 过 程 就 形成 了 一 个 循环 的 交互 系统 。 它 拥有 一 系列 的 动作 及 
反馈 。 也 就 是 说 ， 交 互 是 产生 于 人 和 交互 式 系 统 之 间 的 一 种 动态 现象 ， 随 
看 时 间 与 空间 而 不 断 运动 和 变化 。 

比尔 。 莫 格 里 奇 ( Bill Mogrrige ) ”提出 广义 的 交互 设计 是 对 所 有 具备 数字 
与 互动 特质 事物 的 设计 ; 狭义 的 交互 设计 是 对 于 所 有 同时 具备 数字 与 互动 性 的 物 
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品 在 外 观 与 品质 上 的 设计 ， 其 目的 是 让 它 显 得 实用 、 令 人 渴望 量 容 易 上 手 。 

卡耐基 梅 隆 大 学 ( Carnegie Mellon University ) 交互 设计 研究 生 项 目 创 
始 人 理 查 德 ， 布 坎 南 ( Richard Buchanan ) 将 交互 设计 的 概念 定义 为 ， 通 过 
产品 、 服 务 甚至 复杂 系统 这 些 媒 介 的 影响 来 策划 和 文 持 人 类 的 活动 。 

通过 两 位 学 者 对 于 交互 设计 的 定义 不 难看 出 ， 交 互 设 计 的 设计 对 象 从 
传统 的 设计 “ 物 ” 了 逐渐 转变 为 了 “设计 人 类 的 活动 "。 在 结合 本 书 研究 对 
象 的 基础 上 上， 本章 总 结 出 的 交互 设计 的 舍 义 如 下 : 

从 广义 上 来 说 ， 所 有 具备 互动 特质 事物 的 设计 都 可 以 称 为 交互 设计 。 它 的 
涉及 面 非常 广 ， 如 人 与 计算 机 、 冰 箱 、 汽 车 、 建 筑 之 间 的 互动 等 ， 都 可 以 通过 
交互 设计 来 提升 用 户 体验 ， 使 整个 使 用 、 互 动 过 程 变 得 更 加 美好 。 

从 狭义 上 来 诗 ， 交 互 设计 是 软件 界面 设计 中 的 一 个 重要 环 廊 ， 退 党 为 
了 解决 特定 使 用 场景 下 特定 人 群 使 用 过 程 中 ， 人 与 应 用 和 程序、 软件、 网 站 
等 终 妆 之 间 如 何 喝 目 然 地 进行 对 十 。 

(2 ) 交互 设计 在 界面 设计 中 的 意义 

交互 设计 在 界面 设计 中 的 意义 重大 ， 它 主要 用 来 设计 人 与 春 面 相互 交 
流 的 过 程 ， 即 当 用 户 开局 应 用 之 后 ， 第 一 步 、 第 二 步 ..….... 第 NN 步 怎么 做 ， 
做 什么 ， 以 及 界面 应 该 给 出 何 种 反应 ， 同 时 还 涉及 对 界面 信息 架构 、 流 
程 、 导 航 及 其 他 交互 细节 的 设计 。 交 互 设计 在 界 血 设计 中 有 着 承 上 启 下 的 
作用 ， 既 是 前 期 用 户 及 任务 模型 的 升华 ， 又 是 后 期 视觉 设计 的 基础 。 

特别 是 在 移动 应 用 界面 的 设计 之 中 ， 交 互 设 计 涉 及 与 用 户 行 为 相关 的 
一 切 显 性 及 隐 性 因素 。 移 动 应 用 界面 的 交互 设计 是 在 交互 设计 原则 的 指导 
下 ， 设 计 界 和 面 的 交互 结构 、 上 顺序、 逻辑 等 内 容 。 

( 3) 交互 设计 与 人 机 交互 的 区 别 与 联系 

人 机 交互 ( Human-Computer Interaction ) 又 称 人 机 界面 ( Human-- 
Computer Interface )， 是 融合 了 认 知 心理 学 、 计 算 机 科学 、 人 机 工程 学 、 设 
计 艺 术 学 等 多 种 学 科 的 一 个 交叉 研究 领域 ， 进 行 的 是 具有 一 定 普 适 性 的 近 术 
和 人 的 研究 。 交 互 设计 主要 目的 是 为 了 解决 特定 使 用 场景 下 与 人 有 关 的 一 切 
问题 。 因 此 ， 人 机 交互 偏重 于 扩 术 、 设 计 方 法 论 等 领域 中 前 瞻 性 的 研究 ; 而 
交互 设计 则 更 重视 设计 实践 ， 强 调 设计 理 论 在 具体 设计 活动 中 的 应 用 。 

当然 两 者 也 有 许多 交集 ， 如 人 机 交互 研究 中 总 结 的 一 般 设 计 规 律 、 原 理 和 方 
法 可 以 指导 交互 设计 活动 或 提供 参考 价值 。 而 交互 设计 实践 中 遇 到 的 困难 、 用 户 
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的 直接 反馈 也 能 够 触发 新 的 人 机 交互 研究 ， 为 其 提供 丰富 的 实践 经 验 。 

例如 在 移动 应 用 界 态 设计 中 ， 可 以 将 人 机 交互 岛 域 中 基于 触 屏 的 手势 
交互 反 术 运用 在 交互 设计 中 ; 而 在 具体 做 交互 设计 时 ， 设 计 师 就 要 将 应 用 
界 血 中 的 各 个 功能 与 特定 的 于 劳 操 作对 应 起 来 ， 芳 碟 实 现 这 些 功 能 的 次 序 
和 条 件 是 什么 。 

( 4 ) 移动 应 用 的 交互 设计 

移动 应 用 的 交互 设计 是 一 项 较为 系统 和 复杂 的 设计 工程 。 与 视 况 设计 
相 比 ， 交 互 设 计 的 过 程 可 能 并 不 会 显得 那么 “有趣 ` ， 更 多 的 是 一 种 理 
性 、 严 并 的 思维 方式 。 但 正 是 这 样 一 项 看 似 “ 枯 迷 q” 的 工作 ， 却 能 直接 影 
员 用 户 体 验 的 好 坏 。 交 互 设 计 是 影响 一 个 产品 成 败 的 关键 因 素 。 

移动 应 用 界面 的 交互 设计 涉及 交互 结构 、 顺 序 、 逻 辑 等 内 容 。 与 内 容 
所 对 应 的 交 各 设计 实践 包括 信息 染 构 、 流 程 图 、 导 航 与 各 项 细 三 设计 。 当 
然 ， 交 互 设 计 原 则 与 不 同系 统 平台 设计 规 沁 的 指导 也 对 交互 设计 最 终 的 效 
采 起 到 了 重要 作用 。 


D.1 | 父 已 设计 基础 


5.1.1 用 户 与 界面 的 父 互 万 式 


从 感性 的 角度 来 看 ， 交 互 方式 指 用 户 与 界面 进行 “交流 ”时 ， 需 要 用 
到 的 途 介 与 方法 。 例 如 ， 人 们 通过 单 击 鼠 标 来 与 条 血 界面 进行 交互 ， 通 过 
于 指 单 击 于 机 屏幕 来 与 手机 异 徊 进行 交互 。 交 马 方 式 起 兰 于 日 前 生活 ， 是 
对 人 与 事物 之 间 关 系 的 一 种 观察 、 发 现 与 探索 。 好 的 交互 方式 应 该 是 能 让 
用 户 在 整个 ( 与 软体 界面 交互 ) 过 程 中 ， 感 觉 到 简单 、 顺 畅 和 愉悦 ， 是 一 
种 基于 直 苋 、 下 和 意识 ( 无 顷 过 多 思考 ) 的 操作 行为 。 

从 理性 的 角度 来 看 ， 交 互 方式 来 产 于 人 机 交互 领 敬 ， 如 早期 的 直接 操 
作 、 多 通道 操作 等 。 尼 是 一 种 交互 方式 在 撤 术 层 面 的 研究 与 应 用 ， 其 研究 
成 果 能 帮助 设计 师 将 理想 中 的 交互 方式 变 成 现实 。 

设计 师 在 进行 交互 设计 时 ， 对 于 交互 方式 的 理解 、 思 考 与 运用 是 感性 
与 理性 的 一 种 有 机 结合 ， 是 概念 一 技术 一 实际 体验 的 一 种 系统 化 循环 的 设 
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计 过 程 。 

目前 ， 已 有 很 多 交互 方式 被 人 们 广泛 接受 和 熟知 ， 它 是 人 们 通过 学 习 
与 反复 操作 后 形成 的 某 种 习惯 。 设 计 师 了 解 已 有 的 交互 方式 可 以 很 好 地 指 
导 设 计 工 作 ， 并 帮助 其 更 快 地 设计 出 适用 于 移动 应 用 的 交互 方式 。 

( 1) 直接 操作 

20 世纪 80 年 代 以 前 ， 与 计算 机 有 关 的 操作 方式 都 是 间接 操作 。 间 接 
操作 是 用 户 使 用 命令 、 菜 单 、 空 间 手 势 或 语言 命令 等 非 数 字 对 和 象 的 方式 来 
改变 对 象 ， 如 在 菜单 里 选择 “全 选 ” 命 令 和 在 键盘 上 按 “ 删 除 ” 键 。 直 接 
操作 交互 式 概念 由 美国 马里 兰 大 学 ( University of Maryland ) 的 计算 机 
科学 家 本 ， 施 奈 德 曼 ( Ben Shneiderman ) “教授 于 1983 年 提出 ， 指 在 操 
作 过 程 中 用 户 通过 手指 、 鼠 标 或 其 他 扩展 意义 的 “ 手 ” 选 择 并 操作 数 子 对 
象 ， Tk 放 转 、 拖 熏 等 。 该 过 程 中 ， 用 户 能 模仿 现实 世界 中 的 类 似 场 
景 且 接 完 成 动作 。 例 如 ， 通 过 拖 忠 对 和 象 的 一 角 来 调 太 其 尺寸 大 小 ， 就 像 在 
拉 仲 它 一 一 样 。 软 件 界面 设计 师 一 般 在 设计 前 需要 确定 用 户 操作 的 交互 方式 
是 直接 还 是 间接 的 ， 或 是 两 者 兼 而 有 之 。 

如 今 ， 几 乎 所 有 的 移动 应 用 均 采 用 直接 操作 的 交互 方式 。 这 是 由 于 和 直 
接 操作 更 符合 用 户 直 党 和 和 习惯、 更 容易 学 习 和 使 用 ， 它 将 用 户 的 经 验 直 接 
映射 到 操作 实践 中 。 上 此外， 移动 设 备 、 触 屏 技术 的 不 断 发 展 也 为 移动 应 用 
的 直接 操作 交互 方式 提供 了 有 利 的 技术 基础 。 虚 拟 现 实 9 与 增强 现实 ?9 是 
直接 操作 交互 方式 的 最 新 技术 成 果 ， 促 进 了 娱乐 、 游 戏 甚 至 工具 类 应 用 交 
互 方式 的 发 展 。 因 此 ， 设 计 师 需要 在 对 交互 拉 术 充分 理解 的 基础 上 结合 
标 用 户 的 需求 和 产品 特点 ， 将 直接 操作 的 交互 方式 合理 运用 在 移动 应 用 界 
面 的 交互 设计 中 。 

i 以 下 三 护 原则 : 

(D 用 一 种 令 用 户 熟 悉 且 可 识别 的 方式 来 表示 对 象 或 操作 。 














〇 虚拟 现实 ( Virtual Reality，VR ) 又 叫 虚 拟 环 境 、 灵 境 技术 或 人 工 环境 ， 它 利用 计算 机 模拟 
产生 一 个 三 维 空 间 的 虚拟 世界 ， 提 供给 用 户 各 种 感官 的 刺激 信号 ， 如 光 、 声 音 、 嗅 觉 、 力 度 等 。 人 参 
见 : 百度 百科 . 虚拟 现实 [EB/OL]. http://baike.baidu.com/view/7299.htm. 

名 增强 现实 ( Augmented Reality，AR ) 是 在 虚拟 现实 的 基础 上 发 展 起 来 的 新 技术 ， 也 被 称 为 
混合 现实 。 它 是 一 种 通过 计算 机 系统 提供 的 信息 增加 用 户 对 现实 世界 感知 的 技术 ， 将 虚拟 的 信息 应 用 
到 真实 世界 ， 并 将 计算 机 生成 的 虚拟 物体 、 场 景 或 系统 提示 信息 芭 加 到 真实 场景 中 ， 从 而 实现 对 现实 
的 增强 。 参 见 ， 百度 百科 . Eee ae isn eg 
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(2) 使 用 户 能 直观 觉察 到 自己 的 动作 是 效 。 
用 户 和 失 作 过程 中 友 肖 信任 和 学 人 


er 触 听 、 昕 党 等 各 种 感官 层面 全 方位 地 体验 
品 ， 这 种 技术 上 的 革新 使 应 用 的 发 展 充满 了 更 多 可 能 性 。 
A Modality ) 指 人 类 的 感觉 方式 ， 它 用 来 传达 和 获取 
Oe A 道 有 视觉 通道 、 听 帝 通 道 、 触 竞 通 道 、 语 音 通 
眼 动 通道 和 感觉 通道 等 。 而 人 机 交互 中 的 通道 包括 人 类 和 计算 机 之 间 
交流 的 所 有 方式 ， 即 多 通道 交互 方式 。 
多 通道 的 交互 方式 是 使 移动 应 朋友 分 感知 用 户 表 达 的 信息 并 以 多 种 载 
体 表现 反 饥 ， 它 分 为 输入 和 输出 两 种 通道 类 型 。 一 个 输入 ( 动作 ) 通道 ， 
是 指 通 过 有 某 一 吉安 上 的 人 的 动作 器 宫 现 出 末 
取 ， 并 经 由 适当 的 处 理 转 换 成 相应 的 应 用 可 接受 的 一 条 信息 传输 通 
个 输出 (知觉 ) 通道 则 是 指 信 息 通 过 应 用 表现 出 来 ， ee 
罗 并 双 ee 的 一 条 信息 传输 通 
。” 输 入 通道 关联 人 的 运动 通道 ， 如 手 、 、 头 等 ;而 输出 通道 则 
ee 如 视 痪 、 听 总 、 触 总 、 有 多 个 通道 的 整合 能 提 
高 信息 交互 的 效率 ， 使 操作 更 加 方便 ( 见 图 5-2 )。 


(31) 多 设备 
随 看 设备 和 界面 边界 的 不 断 延 展 ， 人 们 能 与 越 来 越 多 的 设备 进行 交 
互 。 如 今 ， 绝 大 多 yaaa 拥有 一 部 手机 、 一 合 平板 电脑 、 一 合 
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笔记 本 电脑 。 设 备 的 聚合 正 影响 着 人 们 的 生活 方式 ， 而 在 未 来 ， 同 时 面 对 
多 个 设备 的 场景 将 会 变 得 更 加 普遍 ( 见 图 5-3 )。 





5-3 用 户 与 多 设备 的 交互 


用 户 可 以 选择 在 同一 时 间 用 平板 电脑 观看 电影 ， 用 手机 与 好 友 聊 天 ， 
并 丈 练 运用 各 种 操作 方式 ， 如 鼠标 、 键 盘 、 触 措 屏 等 。 面 对 不 同 设 备 ， 用 
户 并 不 会 感到 悍 妨 ， 反 而 得 心 应 手 。 由 此 可 以 看 到 ， 人 与 设备 的 交流 是 动 
态 且 充满 弹性 的 ， 人 在 社会 、 科 技 、 环 境 的 刺激 下 ， 对 于 设备 的 需求 也 在 
节 节 攀升 。 正 如 瑞 秋 “. 辛 曼 ( Rachel Hinman ) “所 说 : 人 们 的 兴趣 不 再 
是 基于 某 一 种 设备 ， 相 有 反 ， 他 们 越 来 越 期 待 不 同 设备 之 间 内 容 、 功 能 以 及 
情境 浑然 一 体 的 使 用 体验 。 

不 同 设 备 之 间 的 信息 可 以 互相 传 违 ， 设 备 与 设备 之 间 可 以 实现 即时 沟 
通 。 存 在 于 交互 系统 中 的 信息 不 册封 闭 ， 人 们 也 可 以 与 信息 进行 更 加 自然 
和 便捷 的 沟通 。 因 此 ， 多 设备 的 生态 体验 系统 已 经 逐渐 形成 。 

如 今 ， 基 于 多 设备 的 交互 体验 设计 成 为 热门 证 题 ， 补 设计 出 来 的 网 
页 、 软 件 被 要 求 适 配 于 任何 平 合 ， 并 且 还 全 s 在 同一 时 间 渤 生 本 实时 同步 。 合 
歌 开发 者 认为 ， 应 该 为 用 户 开发 一 僚 在 跨 平台 和 不 同 的 设备 上 都 有 相同 体 
验 的 系统 ， 计 用 户 感 融 有 有 趣 、 整 洁 而 且 流 畅 。 

用 户 通 过 网 页 浏览 商品 信息 ， 选 中 商品 后 通过 手机 扫 摘 二 维 码 完 成 购 
买 动作 ， 购 买 成 功 的 提示 便 会 同时 出 现在 网 页 和 手机 界面 中 。 因 此 ， 有 时 
候 不 同 设备 之 间 呈 现 一 种 功能 互补 关系 ， 它们 都 有 共同 的 目标 ， 或 许 还 适 
用 于 同一 个 情境 ， 但 每 种 设备 的 存在 都 是 对 整体 性 体验 的 一 种 补充 。 
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( 4 ) 触 控 

自 iphone 面世 以 来 ， 触 控 的 交互 操作 方式 就 变 得 流行 起 来 ， 它 使 人 
与 机 器 的 距离 更 近 了 一 步 。 触 措 是 一 种 非常 直接 的 交互 方式 ， 这 是 因为 触 
觉 是 人 类 的 第 五 感官 ， 手 指 尖 的 可 触 知 末梢 器 官能 市 给 人 们 极其 丰富 的 感 
受 。 触 竞技 术 让 人 们 从 环境 中 得 到 响应 ， 对 环境 的 感 竞 更 敏锐 。 当 看 到 感 
兴趣 的 事物 时 ， 一 般 都 会 产生 想 要 触摸 的 欲望 。 因 此 ， 将 触 控 引入 到 交互 
设计 中 则 会 提升 产品 的 体验 感 ， 使 整个 交互 过 程 变 得 更 加 丰富 。 

震动 提示 是 触 控 交互 方式 中 最 为 单 见 的 一 种 ， 如 采用 震动 来 提示 用 户 该 
项 操作 是 错误 或 者 正确 等 。 与 此 同时 ， 触 咒 的 反馈 还 能 带 给 人 们 直观 的 视觉 
感受 。 人 例如， 用户 通 过 手指 编辑 照片 时 ， 被 选中 照片 的 右 下 角 会 出 现 一 个 黄 
色 的 小 勾 ， 以 告知 用 户 此 照片 被 成 功 选中 。 触 控 的 交互 方式 能 让 用 户 从 触觉 
和 视觉 层面 感受 到 系统 的 反馈 ， 也 使 整个 操作 过 程 变 得 更 加 轻松 和 愉悦 。 

触 控 的 操作 方式 一 般 以 屏幕 作为 载体 ， 屏 幕 成 为 了 手指 与 界面 之 间 的 
媒介 。 随 看 触 控 技术 的 不 断 发 展 ， 手 指 与 界面 之 则 的 “对 话 ” 变 得 更 加 智 
能 人 化。 例如， 为 了 提高 手机 的 安全 性 ，iPhone 5S 加 入 了 指纹 识别 的 功能 
( 见 图 5-4 )， 指 纹 代 蔡 账号 输入 成 为 了 用 户 ID。 


Fé 








5-4 ” iPhone 5S 指纹 识别 
( 图 片 来 源 : www.shiyancn.cn/News/201309/News1509.htm]) 


但 是 ， 触 控 的 交互 方式 也 市 有 某 些 局 限 性 ， 如 无 法 完全 模拟 现实 生活 
中 人 与 物 接触 的 感 书 感受 ， 人 们 更 多 的 是 与 屏 闫 、 设 备 进 行 交 互 ， 而 不 能 
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真实 感受 到 事物 的 质感 、 肌 理 、 坎 度 、 人 情绪 等 。 也 就 是 说 ， 目 前 的 触 控 方 
式 还 只 是 从 屏幕 下 的 界面 中 ， 在 视 略 层 血 模拟 人 与 物 的 一 种 交互 方式 。 

( 5 ) 手势 

长 按 “手指 上 下 左右 滑动 "、“ 长 按 并 拖 忠 ”等 都 是 在 使 用 手机 时 经 
弟 用 到 的 操作 方式 。 微 信 有 的 “ 摇 一 近 ”功能 使 手势 刺 出 了 手指 与 屏 划 交 互 
的 界限 ， 变 得 时 加 灵 疾 和 有 目 然 。 

手势 是 基于 触 控 的 一 种 交互 方式 ， 以 多 点 触 控 撤 术 为 基础 。 手 势 是 
手 或 者 手 和 臂 结 合 所 产生 的 各 种 姿势 和 动作 。 “在 日 常生 活 中 ， 人 与 人 之 
间 会 通过 手势 进行 有 效 的 沟通 并 传达 信息 ， 因 此 将 手势 运用 到 移动 应 用 界 
面 的 交互 设计 中 ， 能 提高 人 与 应 用 交互 的 效率 。 

于 劳 操 作 一 般 基 于 移动 设备 触摸 屏 展开 。 叱 分 为 基本 操作 、 导 航 操 
作 、 对 象 操作 和 绘制 操作 4 种 类 型 ( 见 图 5-5 )。 基 本 操作 一 般 用 来 选择 
或 激 酒 对 象 ， 如 选择 菏 个 项 目 ;， 导航 操作 用 来 切换 或 移动 ， 如 跳 转 页 面 ; 
对 多 操作 是 基于 示 一 项 功能 而 进行 的 具体 操作 ， 如 编辑 图 片 ; 绘制 操作 
则 更 加 灵活， 在 游戏 与 浏 贤 器 应 用 中 运用 得 最 为 广 演 ， 如 在 浏 贤 絮 中文 持 
用 户 目 定义 手势 从 号 从 而 达到 开局 不 同 项 目的 目的 。 切 水 果 游 戏 中 通过 手 
指 的 横向 滑动 完成 切 水 果 的 一 个 动作 。 手 势 让 用 户 的 操作 过 程 玩 具有 掌控 
性 和 趣味 性 ， 然 而 它 也 存在 一 些 不 足 ， 如 手指 在 操作 的 过 程 中 容易 阻挡 用 
户 视 线 ， 手 指 单 击 的 准确 度 不 够 等 。 

移动 应 用 手势 操作 设计 的 天 键 扣 如 下 : 

手势 设计 要 符合 用 户 的 心理 模型 ， 其 表达 的 含义 易 被 用 户 接受 。 

他 手 田 作为 一 种 从 号 要 注意 其 能 指 与 所 指 的 表意 方式 是 舍 与 用 户 的 
认 知 、 文 化 、 习 惯 相符 合 ， 通 用 的 、 形 象 的 以 及 有 意义 的 手势 符号 才 更 容 
易 饭 学 习 和 记忆。 

(3) 手势 操作 定义 要 尽量 简洁 和 上 自然 ， 如 辆 一 个 钩 表 示 确 认 ， 辆 一 个 
圈 表 示 选 定 等 。 

由 需要 针对 新 手 用 户 进 行 手势 操作 的 提示 与 引导 ， 如 每 用 户 打 开 应 


用 后 ， 将 手势 的 表意 与 操作 以 视 和 形 式 表 现在 新 手 引 导 册 向， 以 便 用 户 快 
速 学 习 相 操作 。 


B 将 复杂 的 手势 作为 备 选 的 快捷 方式 ,支持 用 户 目 定义 使 用 或 隐藏 
手势 操作 。 
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选择 打开 改变 模式 
前 击 Tap 双击 Double tap 长 按 press 
导航 操作 ( 举例 ) 
滚动 平移 显示 命令 
两 指 拖 动 手掌 拖 动 
Two-finger drag Drag hand 1 2 
按 与 敲 击 
滑动 Press and tap 
flick 
对 象 操作 ( 举例 ) 
缩小 扩大 调整 
WY OV VU 
捏 Pinch 展开 Spread 按 住 并 拖 动 Press and drag 
挤 Squeeze 伸展 splay 按 住 并 敲 击 ， 然 后 拖 动 
Press and tap, then drag 
绘制 操作 ( 举例 ) 
接受 
指 估 画 钩 指 估 画 尖 在 界面 上 划 掉 
Draw a checkmark a 画作 线 Draw a slash 
图 5-5 移动 应 用 界面 手势 操作 示意 图 
小 设计 大 思维 一 一 移动 应 用 界面 的 设计 方法 与 实践 





( 6 ) 语音 

语言 是 传递 人 们 思想 最 为 便捷 的 方式 ， 通 过 踢 巴 表达 自己 的 想法 。 声 
首 是 不 会 占据 空间 的 一 种 传递 媒介 ， 通 过 和 耳 灯 聆听 对 方 的 意见 。 昕 与 说 的 
互动 过 程 几乎 每 天 都 在 发 生 。 

通过 语音 实现 用 户 与 移动 应 用 的 交流 是 一 种 最 符合 人 类 直觉 的 交互 方 
式 。 它 由 人 与 人 的 对 话 交 谈 的 方式 延展 而 来 ， 为 移动 应 用 更 高 层次 的 智能 
化 交互 提供 了 良好 的 途径 。 语 音 交 互 系统 有 以 下 两 个 优点 : @ 语言 比 键 
盘 输 入 更 快 且 更 有 效 ; 忆 在 多 任务 的 情景 中 ， 提 供 了 更 多 的 反应 通道 ， 
使 手 可 以 腾 出 来 做 其 他 事 。 

早 在 20 世纪 60 年 代 ， 人 们 就 开始 研究 计算 机 语音 识别 技术 。 美 国 
IBM 公司 于 20 世纪 90 年 代 推 出 了 声控 打字 及 语音 导航 的 语音 识别 输入 软 
件 ( IBM Via Voice )， 并 在 全 球 成 功 销售 了 100 多 万 套 。 随 后 微软 公司 在 其 
Windows XP 的 操作 系统 中 加 入 了 语 首 控制 的 功能 ， 方 便 用 户 在 不 使 用 键盘 
和 鼠标 的 情境 下 通过 语音 对 计算 机 进行 简单 的 控制 。2009 年 ， 合 歌 公司 推 
出 了 智能 语音 搜索 功能 ( Voice Search )， 系 统 在 识别 用 户 声 音 后 提炼 关键 
词 并 进行 搜索 ， 这 项 功能 已 经 在 浏览 器 应 用 中 广泛 应 用 。2011 年 10 月 ， 平 
果 公 司 在 其 发 布 的 手机 iPhone 4S 中 增加 了 语音 控制 功能 Siri ( 见 图 5-6 )， 
用 户 不 仅 能 对 它 提 问 ， 还 能 与 它 交 谈 。9Siri 比 语 首 搜索 时 加 人 性 化 ， 它 能 
结合 上 下 文 语 境 去 理解 用 户 话语 中 的 引申 义 ， 并 执行 命令 。 


"yf 








ep ~ 
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~ ed 
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5-6 ;iphone 4S 语音 控制 功能 Siri 
( 图 片 来 源 : baike.baidu.com ) 
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在 移动 应 用 中 ， 语 首 的 交互 方式 分 为 语音 输入 和 输出 两 种 类 型 ( 见 
图 5-7 )。 语 首 输 入 : 用 户 通 过 语音 的 方式 同 移 动 应 用 输入 信息 ， 主 要 分 
为 语音 搜索 和 语音 控制 网 种 形式 。 语 音 输出 : 移动 应 用 对 用 户 的 操作 发 出 
语 首 的 有 反馈， 这 种 反馈 一 般 是 由 系统 发 出 的 短促 的 提示 首 。 例 如 ， 用 户 成 
功 完成 示 项 操作 后 系统 反 蚀 出 “操作 成 功 ”的 提示 音 ; 在 用 户 操 作 失 败 或 
操作 和 销 误 的 情况 下 ， 系 统 也 会 给 出 相应 的 提示 音 。 

语音 输入 
语音 搜索 、 语 音 控制 


用 户 应 用 





图 5-7 语音 的 交互 方式 

语音 交互 已 经 成 为 移动 应 用 常见 的 交互 方式 。 其 中 ， 系 统 对 语 首 识别 
的 准确 性 是 语音 交互 成 功 的 关键 。 无 论 用 户 操作 的 情况 如 何 ， 系 统 都 应 给 
出 友好 的 语音 有 反馈。 语音 交互 是 移动 应 用 人 人工 智能 化 的 发 展 方 富 ， 应 用 界 
面 也 会 随 之 变 得 更 加 自然 简洁 。 

(7 ) 新 兴 的 交互 方式 

由 人 脸 识 别 : 基于 人 的 面部 特征 而 进行 信息 识别 。 随 着 移动 互联 网 
的 快速 发 展 ， 人 脸 识 别 被 广泛 运用 到 移动 应 用 中 。 例 如 ， 用 脸 对 准 摄像 
头 ， 直 接 “ 刷 脸 ” 登 录 个 人 账号 ; 根据 人 脸 的 轮廓 、 肤 色 、 纹 理 、 色 彩 等 
特征 来 计算 照片 中 主人 公 与 明星 的 相似 度 。 

@) 视 控 : 用 视线 、 眼 神 、 目 光 进 行 操 作 。 通 过 这 项 技术 ， 用 户 可 以 
借助 眼球 视线 的 移动 来 实现 手机 的 操作 ， 如 打开 应 用 程序 、 上 下 滚动 信息 
等 ，6oogle Glass 就 采用 了 这 种 方式 。 眼 动 追 踪 的 技术 在 计算 机 端的 发 展 
已 经 比较 成 熟 ， 但 在 移动 设备 中 的 运用 还 不 够 广泛 。 也 许 在 不 久 的 将 来 ， 
它 会 取代 触 控 、 手 势 而 成 为 主流 的 交互 方式 。 

(3) 体感 交互 : 用 身体 进行 操作 。 微 软 公 司 的 Kinect 将 体感 交互 融入 
到 人 与 界面 的 交互 中 ， 这 种 简单 的 方式 能 使 人 们 轻松 学 习 和 控制 信息 。 通 
过 体感 交互 ， 手 指 不 需要 完全 接触 到 屏幕 就 能 实现 操作 ， 以 屏幕 作为 交互 
媒介 的 思路 将 逐渐 变 得 模糊 。 目 前 ， 由 于 移动 设备 界面 的 空间 有 限 ， 因 此 
体感 交互 发 挥 的 空间 也 受到 了 相应 限制 。 


小 设计 大 思维 
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(4 气味 交互 : 通过 嗅觉 系统 与 事物 进行 交互 。 气 昧 交互 可 以 帮助 人 
们 更 直观 地 辨别 、 搜 索 、 判 断 信 息 。 也 许 日 后 可 以 通过 气味 进行 好 友 搜 
索 、 查 找 人 信息、 展开 学 习 等 。 目 前 ， 已 有 公司 开发 了 基于 气味 交互 的 产 
品 。2014 年 年 初 ，Cartamundi 公司 推出 了 一 款 名 为 01lfacio 的 应 用 ， 用 
户 用 手 在 产品 配套 的 植物 卡片 上 摩擦 一 下 ， 再 放 到 iPad 上 ，iPad 便 能 识 
别 卡 片上 植物 的 气味 。 

(3) 空间 交互 : 采用 全 上 息 投影 扩 术 在 空间 中 显示 信息 。 例 如 ，takee 
全 息 手 机 就 采用 了 全 息 投 影 技 术 和 空间 交互 的 理念 ( 见 图 5-8 )。 先 通过 
及 像 头 追 踪 人 眼 的 视角 位 置 ， 再 计算 出 实际 的 全 息影 像 ， 最 后 通过 特殊 指 
回 性 显示 屏 才 将 左右 眼 的 立体 图 像 精 准 投 射 到 人 眼 的 视网膜 之 中 ， 从 而 使 
人 眼 在 空间 中 产生 了 立体 的 视 沉 效果。 目前， 基于 空间 交互 的 技术 还 不 够 
成 熟 ， 但 这 样 一 种 交互 理念 无 疑 是 新 统 和 值得 推崇 的 。 





5-8 takee 全 息 手 机 
( 图 片 来 源 : baike.baidu.com ) 


随 着 技术 的 不 断 发 展 ， 相 信和 越 来 越 多 的 交互 方式 会 以 一 种 更 得 合 人 们 
区 的 方式 进入 生活 中 。 未 来 ， 也 许 人 们 不 再 依赖 手机 、 平 板 电 脑 等 设 
备 ， 也 不 需要 专门 鸭 界 面 作 为 巡 介 。 一 切 感 部、 行动 都 是 体验 ， 人 就 是 交 
互 核心 ， 交 互 方式 的 边界 也 会 变 得 更 加 广阔 。 


5.1.2 ”交互 设计 的 维度 


交互 设计 的 核心 内 容 是 用 户 、 界 面 系统 与 用 户 使 用 环境 。 可 用 性 与 用 
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户 体验 是 文 柑 整个 交互 系统 的 网 个 基本 维度 ( 见 图 5-9 )。 


能 用 /好 用 /结果 导 问 





体验 /过 程 /整体 感受 





5-9 交互 设计 的 两 个 基本 维度 


有 人 认为 可 用 性 是 用 户 体验 中 的 一 个 分 支 ， 实 际 上 可 用 性 与 用 户 体验 
是 不 同时 期 所 产生 的 设计 理念 ， 其 设计 对 象 都 是 用 户 ， 但 前 者 偏重 于 产品 
的 功能 ， 而 后 者 偏重 于 产品 的 情感 。 因 此 ， 可 以 这 样 理解 ， 可 用 性 比较 理 
性 ， 用 户 体验 比较 感性 ， 两 者 存在 交集 。 

( 1) 交互 的 基础 层 一 一 可 用 性 

简单 来 说 ， 可 用 性 就 是 检验 一 个 产品 是 售 能 用 以 及 好 用 的 一 种 标准 。 
例如 ， 冰 箱 是 否 制冷 、 鞋 子 是 否 合 脚 、 药 物 是 否 能 治 病 、 地 铁 是 否 能 达到 
目的 地 等 。 交 互 设 计 的 目的 是 提高 界面 的 可 用 性 ， 让 应 用 界面 变 得 更 加 友 
好 易 用 。 著 名 的 可 用 性 研究 专家 和 雅 各 布 . 尼尔森 ( Jakob Nielsen ) “博士 
指出 可 用 性 界面 应 包含 以 下 5 个 要 素 : 可 学 习性 ( Learning )、 效 率 
( Efficiency )、 可 记忆 性 ( Memorability )、 出 错 ( Errors )、 满 意 度 
( Satisfaction， 如 图 5-10 所 示 。 








可 记忆 性 


界面 中 各 项 功能 使 用 户 的 操作 界面 核心 内 容 与 操 | 减少 出 错 率 ， 若 出 | ”使 用 户 的 操作 过 
容易 被 用 户 学 习 流畅 和 高 效 作 容 易 被 用 户 记 住 | 错 也 能 帮助 用 户 及 | 程 始 终 保 持 恰 悦 
时 地 解决 问题 





5-10 ”可 用 性 五 要 素 
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Q) 可 学 习性 : 应 用 应 当 容 易学 习 ， 用 户 能 在 短 时 间 内 学 会 使 用 
应 用 。 

@ 效率 ， 应 用 的 使 用 应 当 高 效 ， 当 用 户 学 会 使 用 应 用 之 后 ， 可 能 具 
有 较 高 的 生产 刁 水 于 


] DR 








频繁 使 用 应 用 的 用 户 ( 在 一 
站 无 顷 从 头 学 起 。 
eR 错 ， 在 出 错 后 也 能 也 
恢复 。 此 外 ， 还 要 避免 灾难 性 铺 误 的 发 生 。 
@ 满意 度 : 应 用 应 当 使 用 户 在 主观 上 感到 满意 、 愉 快 ， 并 喜欢 使 用 























段 时 | 








该 应 用 。 
ee 见 图 5-11 ): 每 当 用 户 发 表 一 条 做 博 ， 基 于 
该 条 微 博 的 评论 都 能 一 目 了 然 ， 而 不 需 跳 转 到 其 他 界 向 ， 转 发 、 扣 赞 的 数 


pt ey 由 此 得 出 ， 币 二 这 种 类 似 于 日 闸 生 疾 中 用 简 
短语 言 对 请 的 交互 形式 ， 不 仅 提 高 了 用 户 的 效率 和 满意 度 ， 还 避免 了 复杂 
或 学 习 过 程 ， 减 少 了 用 户 出 销 的 概率 。 


铬 和 和 大 家 相互 转告 号 








@ 微 博 容 服 玉 于 
沙 公 告 ## 溢 党 的 用 片 ， 接 运营 商 通 知 ， 今 史 0 点 至 6 点 ' 运营 商会 对 网 络 进行 升级 调整 : 局 
时 有 可 能 会 对 您 使 用 微 博 造成 影响 ， 微 博 攻 城 狮 已 经 进入 备战 值班 感谢 您 对 微 博 的 支 


持 和 理解 。 
来 自 : 让 (291) | 18 | 
8 月 13 日 22:55 来 自 iPhone 容 户 汝 扯 包 4 让 | 转发 上 6 耻 | 收藏 | 评论 介 0) 
全 新 浪 微 博 社区 管理 中 心 举报 处 理 大 厅 ， 欢迎 查阅 | x | 
圈 日 同时 转发 到 我 的 微 博 
站 同时 评论 给 原文 作者 微 博客 服 
全 部 | 共同 评论 | 认证 用 户 | 关注 的 人 共 207 条 
国 一 = :为 什么 不 能 二 新 账 引 阿 ? 来 彤 八 全 天 17.52) 
回复 
-i 1@ 微 博 小 秘书 : 铬 铬 和 大 家 相互 转 
告 哦 ! (今天 15:56) 
回复 


5-11 ， 新浪 微 博 页 面 
( 图 片 来 源 : www.weibo.com ) 
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(2) 交互 的 提升 层 一 一 用 户 体验 
在 日 党 生活 中 ， 人 们 无 时 无 刻 不 在 进行 着 体验 活动 ， 如 走路 、 吃 饭 、 
看 书 、 旅 行 、 交 谈 等 。 然 而 有 不 少 差 的 体验 出 现在 生活 中 。 例如， 顾客 选 


择 到 一 家 餐厅 用 餐 ， 刚 到 餐厅 时 需要 排队 等 座 ， 生 等 到 座位 开始 氮 餐 时 服 
员 的 态度 恶 盆 ， 上 菜 后 菜 的 味道 不 佳 ， 最 后 顾客 在 付款 时 硕 望 用 信用 下 
发 


， 可 和 餐厅 不 支持 刷 信 用 卡 ， 一 定 要 顾客 现金 支付 账单 。 这 样 看 来 ， 尽 
后 的 结果 是 用 户 等 到 座位 也 吃 到 了 饭 ， 但 一 整套 的 体验 却 糟 糕 到 极 
， 因 此 可 以 猪 测 该 用 户 再 也 不 会 到 这 个 餐厅 用 和 餐 了 。 

某 些 餐厅 为 了 吸引 顾客 也 会 通过 各 种 方式 提供 恨 好 的 用 户 体验 ， 如 疆 
合 餐 厅 的 名 字 与 定位 ， 在 装 江上 有 上 所 突破 ， 有 吸引 顾客 眼球 ; 不 定期 进行 促 
销 活 动 ， 赠 送 优惠 券 ， 提 供 菜 品 折扣 ; 为 等 每 用 餐 的 顾客 提供 酒水 、 玩 具 
等 服务 ; 下 雨天 为 顾客 准备 雨 侍 。 

男 外 一 个 极致 追求 用 户 体 验 的 餐厅 是 Ultraviolet by Paul Pairet 
( 见 图 5-12 )， 它 是 全 世界 第 一 个 感 启 餐厅 ， 也 是 2013 与 2014 年 年 度 亚洲 
最 佳 前 50 名 的 餐厅 ， 由 法 国 著 名 厨 师 Paul1 Pairet 创办 。 该 餐厅 一 天 只 接待 
10 个 客人 ， 需 要 提前 3 个 月 从 官方 网 站 预订 座位 ， 人 均 消 费 高 达 3000 元 。 
餐厅 不 提供 具体 地 址 ， 客 人 集合 后 由 和 餐厅 派 出 专车 统一 送 往 用 和 餐 地 后。 
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5-12 Ultraviolet by Paul Pairet 感官 餐厅 
( 图 片 来 源 : www.uvbypp.cc ) 
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主 餐厅 有 四 面 高 墙 ， 中 间 摆 放 着 巨大 的 长 桌 和 10 把 椅子 ， 头 项 上 有 

部 投影 机 和 多 个 镁 光 灯 ， 空 气 中 还 散发 着 未 知 的 香味 。 

Ultraviolet 最 大 的 特点 是 使 用 餐 体验 变 得 丰富 、 神 秘 相 充满 想象 
力 ， 调 动 了 顾客 的 味 竞 、 视 觉 、 嗅 觉 、 昕 觉 、 触 觉 等 多 重 感 官 。 例 如 ， 当 
服务 员 上 “海水 浸 龙 是 ”这 道 菜 时 ， 用 餐 者 被 市 到 了 海边 ， 被 波浪 环 经 
着 ， 伴 随 着 海鸥 的 叫 声 ， 晚 宴 的 主人 Fabien Verdier 捧 着 蒸汽 中 带 有 海 
水 的 咸 味 儿 的 炊具 在 房间 跷 步 。 ”Ultraviolet 服务 员 的 态度 非常 亲 和 、 
随意 ， 会 带 顾 客 参 观 餐厅 ， 与 顾客 亲切 交谈 ， 其 服务 理念 会 让 用 户 感 到 轻 
松 、 愉 悦 。 

如 何 让 生活 中 充满 良好 的 用 户 体 验 ， 这 就 是 设计 师 需 要 思考 的 问题 。 
在 交互 设计 中 ， 用 户 体验 包含 了 用 户 使 用 界面 的 全 部 过 程 与 感受 ， 如 用 户 
使 用 界面 时 的 愉悦 感 与 价值 感 等 。 

美国 谷歌 ( Google ) 用 户 体验 设计 团队 ”提出 了 用 户 体 验 的 十 大 原则 


( 见 图 5-13 )。 
引导 BS、 
一 多 1 (分 创新 Se 
10% Ne SA 1 5% 】 站 和 
“以 用 户 
上 为 中心 用 户 体验 一 (ee 
光 2 


1 > PE De 8% 1 
了 人 NN (Em 
NU \、5% 人 | 信任 | [赏心悦目 | 、8% ” 
8%0  / \ 8% 





图 5-13 用户 体验 的 十 大 原则 





中 以 用 户 为 中 心 一 一 关注 用 户 的 生活 、 工 作 以 及 梦想 ， 产品 开发 团 
队 应 该 致力 于 研究 和 发 现 用 户 的 真正 需求 ， 并 根据 这 些 信息 创建 产品 ， 以 
解决 用 户 在 现实 中 的 问题 ， 改 蔷 用 户 的 生活 。 

@) 快 比 慢 交 乡 恰 每 一 襄 秒 的 价值 : 产品 目标 应 该 使 用 户 更 快 地 找 
到 想 要 的 内 容 。 将 用 户 最 需要 的 功能 和 文本 放置 在 页 面 中 比较 明显 的 区 域 ， 
省 去 不 必要 的 单 击 、 输 入 等 操作 。 使 用 户 所 有 的 任务 都 是 迅速 和 高 效 的 。 

3) 简单 一 一 将 一 种 体验 做 到 最 好 : 简单 不 仅 体 现在 只 提供 一 种 服 
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务 ， 还 需要 界面 中 的 视觉 效果 加 以 表现 。 它 强调 产品 创新 ， 而 不 仅仅 是 功 
能 的 增加 。 

由 引导 一 一 吸引 新 用 户 ， 留 住 老 用 户 : 产品 应 该 为 新 用 户 提供 良好 
的 初始 体验 ， 同 时 通过 持续 的 体验 提升 老 用 户 的 产品 忠诚 度 。 一 个 拥有 恨 
好 体验 设计 的 产品 能 使 新 用 户 很 快 接受 并 熟 芒 产品 ， 并 鼓励 用 户 使 用 高 级 
功能 。 此 外 ， 产 品 还 要 适时 地 升级 功能 和 体验 以 吸引 资深 用 户 ， 如 支持 在 
多 个 设备 和 计算 机 之 间 共 享 数据 等 。 

@ 创新 一 一 成 功 的 基石 ; 将 设计 从 沉 头 乏味 变 得 令 人 愉快 需要 依靠 
想象 力 。 因 此 ， 应 该 鼓励 那些 创新 和 具有 冒险 精神 的 设计 。 设 计 不 只 是 为 
了 适应 现 有 的 产品 功能 ， 而 是 着 眼 于 改变 整个 “游戏 ”的 方式 。 

(6) 普 适 性 一 一 为 所 有 人 做 设计 : 开发 产品 不 仅 应 该 致力 于 设计 简单 
的 功能 和 丰富 的 产品 ， 还 要 提供 一 个 有 用 的 、 可 享受 的 体验 给 每 位 用 户 。 

(CO 运筹 肉 幅 一 一 可 持续 发 展 计划 : 为 了 实现 熏 利 的 目标 应 该 确保 商 
业 计 划 和 用 户 的 目标 无 颖 集成 。 例 如， 确保 广告 具有 相关 性 、 有 用 性 和 清 
晰 的 可 识别 性 。 

@ 赏心悦目 一 一 使 用 户 感到 愉悦 和 满足 : 为 了 使 用 户 感受 到 产品 的 
可 靠 性 和 专业 性 ， 设 计 团 队 应 该 设计 恨 好 的 产品 体验 。 一 个 干净 、 清 页 、 
加 载 迅 速 ， 且 不 分 散 用 户 注意 力 的 界面 设计 更 符合 用 户 需 求 。 但 考虑 到 用 
户 文化 背景 的 因素 , “简单 优雅 ”并 不 是 所 有 产品 的 最 好 选择 。 因 此 需要 
依据 实际 情况 ， 不 断 改 善 界面 视觉 可 用 性 以 使 用 户 感 到 愉悦 和 满足 。 

(9) 信任 一 一 博得 用 户 信任 : 产品 的 可 靠 性 需要 从 基础 开始 ， 如 确保 
界面 的 高 效 和 专业 、 广 告 的 明确 识别 、 术 语 的 一 致 性 等 。 同 时 ， 还 要 使 用 
透明 的 数据 ， 并 警告 一 切 不 安全 的 操作 ， 虽 在 使 用 户 感到 安心 。 

(9 接触 一 一 产品 拟人 化 设计 : 产品 的 文本 和 设计 元 素 都 应 是 友好 、 
智能 的 。 例 如 ， 文 本 支持 直接 与 用 户 对 话 ， 并 提供 实际 的 协助 。 除 此 以 
外 ， 产 品 还 要 根据 用 户 反 馈 炉 取 行 动 ， 在 每 个 产品 的 可 用 时 间 里 寻找 最 住 
的 平衡 ， 并 坚持 迭代 创新 持续 改善 的 设计 活动 。 

另外 ， 在 谷歌 ( Go0gle ) 搜索 结果 的 页 面 中 发 现 6oogle 将 其 标志 与 
搜索 结果 页 面 的 数字 进行 结合 ， 若 搜索 结果 有 10 项 ， 标 志 中 间 则 会 出 现 
10 个 0， 当 前 页 面 的 0 会 用 红色 表示 ( 见 图 5-14 )。 由 此 可 以 看 出 ， 在 可 
用 性 设计 的 基础 上 ， 加 入 些许 情感 化 的 设计 元 素 ， 就 能 带 给 用 户 眼 前 一 亮 
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的 感 项 。 这 既 表 达 了 搜索 页 面 的 当前 状态 ， 又 富有 趣味 性 。 对 于 谷歌 而 
言 ， 这 样 的 设计 还 起 到 宣传 品牌 形象 的 附加 作用 ， 因 此 这 是 一 个 兼 具 可 用 
性 和 良好 用 户 体 验 的 设计 。 


‘¢ GOOOOOO0O00O00Sle ， 


上 一 页 长 村 这 时 5 下 一 页 


图 5-14 ”Google 搜索 结果 页 切换 设计 
( 图 片 来 源 : www.google.com ) 


5.1.3 ”移动 区 互 设 计 原 则 


设计 原则 是 帮助 设计 师 少 走 弯 路 ， 协 助 设 计 师 完成 设计 工作 的 一 系列 
准则 。 这 些 准则 都 建立 在 不 同 设计 前 辈 丰 富 的 实践 、 经 验 与 理论 基础 之 
上 ， 其 主要 目的 是 提高 设计 的 效率 ， 防 止 设计 师 在 设计 过 程 中 产生 无 谓 的 
附加 劳动 。 一 套 好 的 交互 设计 原则 应 该 具备 简洁 、 流 畅 、 逻 辑 清 上 晰 、 针 对 
性 较 强 的 特点 。 例 如 ， 苹 果 公 司 从 隐喻 、 直 接 操 作 、 即 看 即 点 、 反 
饶 、 用 户 控制 、 美 学 集成 度 6 个 方面 提出 了 一 套 简 洁 并 容易 理解 的 
i0S 设计 原则 。 

随 着 软件 交互 设计 专业 的 迅速 发 展 ， 许 多 该 领域 著名 的 专家 和 设计 师 
提出 了 交互 设计 的 原则 。 例 如 ， 本 ， 施 奈 德 曼 ( Ben Shneiderman ) “在 
《 用户 界面 设计 一 一 有 效 的 人 机 交互 策略 》 一 书 中 提出 “交互 设计 黄金 八 
法 ": 提高 一 致 性 、 满 足 普遍 可 用 性 的 需要 、 提 供 信息 的 反馈 、 设 计 对 话 
框 以 产生 结束 信息 、 预 防 错误 、 人 允许 撤销 操作 、 支 持 用 户 控 制 系统 、 减 轻 
短期 记忆 负担 ; 比尔 . 莫 格 里 奇 ( Bill Moggridge ) “也 提出 好 的 交互 设 
计 需 要 具备 以 下 5 点 : 清晰 的 心理 模型 、 使 人 安心 的 反馈 、 良 好 的 导航 、 
前 后 一 致 、 依 赖 直觉 的 交互 。 

在 他 们 的 理论 中 ， 并 不 是 所 有 的 原则 都 适合 移动 应 用 的 交互 设计 原 
则 。 针 对 移动 应 用 的 交互 设计 原则 需要 考虑 的 不 确定 因素 更 多 ， 如 移动 设 
备 的 性 能 、 交 互 方式 、 屏 幕 大 小 、 网 络 接 入 情况 、 内 容 、 视 觉 界面 ;多 变 
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的 移动 场景 : 地铁、 公交 车 、 电 梯 、 和 餐厅、 办公室 、 家 中 等 。 当 用 户 在 室 
外 使 用 移动 应 用 时 ， 和 若 遇 到 网 络 连接 情况 不 佳 的 状况 ， 系 统 就 需要 在 反 
饥 中 加 入 更 多 的 情感 化 设计 ， 只 有 这 样 才能 降低 用 户 的 负面 情绪 。 例 
如 ， 搞 趣 网 就 在 页 面 加 载 时 加 入 了 情感 化 互动 的 卡通 图 案 和 文字 “下 
一 页 很 想见 你 "， 为 用 户 等 竺 下 一 页 营造 一 个 更 加 活 涛 轻松 的 氛围 ( 见 
5—15 )。 
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5-15 ” 搞 趣 网 加 载 页 面 


在 上 述 理论 研究 的 基础 上 结合 移动 应 用 的 特 幢 ， 归 纳 得 出 移动 应 用 交 
互 设 计 原 则 需要 遵循 以 下 几 护 : 

(1 ) 专注 主体 内 容 

由 于 移动 设备 及 移动 环境 等 多 方面 的 限制 ， 设 计 师 需要 专注 于 用 户 关 
注 的 主体 内 容 ， 而 非 面面俱到 。 这 是 移动 应 用 交互 设计 的 首要 原则 ， 其 他 
界面 设计 要 素 都 要 围绕 内 容 本 身 展 开 。 

寞 回应 该 能 使 用 户 高 度 聚 焦 于 内 容 ， 而 内 容 的 呈现 又 需要 简单 明了 。 
在 快 浏览 时 代 ， 图 片 加 简短 文字 说 明 是 最 佳 的 选择 。 直 接 呈 现 用 户 需要 的 
信息 ， 如 当 用 户 进 入 Airbnb 时 ， 他 们 最 关心 的 是 “房间 的 样子 ”， 即 房间 
的 装饰 装潢 、 客 厅 、 沙 发 、 床 等 信息 ， 因 此 房间 图 片 在 页 面 中 最 为 显眼 ， 
主 据 了 屏 才 的 大 部 分 空间 。 随 之 而 来 的 房间 价格 、 地 点 、 类 型 、 人 和气 也 是 
用 户 关注 的 内 容 ， 它 们 作为 图 片 的 说 明 也 出 现在 了 首页 中 ( 见 图 5-16 )。 
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5-16 Airbnb 界面 


( 2 ) 为 用 户 提 供 友 好 的 反馈 

用 户 在 进行 任务 操作 时 ， 应 用 需要 告知 其 行为 产生 的 结果 ， 这 就 是 反 
馈 。 反 馈 的 目的 是 使 用 户 了 解 系统 的 状态 。 例如， 当 用 户 分 享 文件 成 
功 后 ， 界 面 中 出 现 对 话 框 提示 “文件 已 分 享 ”; 看 不 成 功 ， 界 面 中 则 会 出 
现 “文件 分 享 失败 ， 请 稍 后 重 试 ”的 反馈 。 反 馈 分 为 即刻 反馈 、 一 直 存 在 
的 反馈 、 正 面 反 馈 和 负面 反馈 ， 其 表现 形式 也 多 种 多 样 。 

移动 应 用 界面 反馈 从 感官 上 划分 主要 分 为 视 沉 反馈、 听觉 反馈 和 触觉 
反馈 三 种 形式 。 

由 视觉 反馈 : 图形 反 馈 ( 气球 状 通知 、 对 话 框 状 提 示 、 非 模 态 反馈 
等 ) 、 图 标 单 击 的 状态 ( 长 按 、 选 中 、 示 选中、 无效 ) 、 动 画 ( 界面 开 
局 、 进 度 条 、 刷 新 、 下 载 、 移 动 等 ) 、 灯 光 ( 指示 灯 、 色 彩 变 化 等 ) 。 

@ 听 兑 反 饥 : 提示 音 ( 单 击 状态 、 发 送 成 功 、 推 送 消息 等 ) 、 音 乐 
( 界面 开局 音乐 、 娱 乐 应 用 中 的 音效 等 ) 。 

(3) 触觉 反馈 :振动 ( 新 消息 推送 、 娱 乐 功能 等 ) ， 一般 支 持 用 户 自 
定义 开局 或 关闭 。 


交互 设计 (1) 
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在 众多 的 反馈 结果 中 ， 用 户 期 望 的 是 友好 反馈 ， 而 不 是 一 种 让 人 感到 
害怕 、 焦 虑 或 自 责 的 有 反馈 结果 。 用 户 使 用 应 用 的 过 程 难 免 发 生 误 操作 的 情 
况 ， 应 用 系统 要 尽量 做 到 包容 用 户 发 出 的 一 般 性 错误 ， 并 使 其 容易 还 原 到 
销 误 发 生前 的 状态 。 例 如 ， 当 由 某 客 观 原 因 造 成 用 户 当 前 操作 无 法 完成 
时 ， 界 面 中 应 该 浮现 一 个 醒目 的 提示 对 话 框 ， 并 加 以 文字 说 明 此 操作 失败 
的 原因 ， 及 时 给 出 相应 的 撤销 操作 ; 当 由 用 户主 观 原 因而 导致 无 法 顺利 运 
行 应 用 时 ， 界 面 中 则 应 浮现 对 话 框 ， 并 用 简洁 的 文字 直接 说 明 原 因 或 告知 
用 户 正确 操作 的 方法 ; 当 用 户 删 除 某 个 信息 时 ， 有 界面 中 应 该 浮现 对 话 框 询 
问 是 售 确 定 要 执行 操作 ， 并 为 用 户 提供 撤销 的 选择 。 当 然 ， 有 效 的 设计 能 
避免 错误 的 发 生 。 正 如 日 本 工业 工程 师 、 品 质 专家 新 乡 重 夫 ( Shigeo 
Shingo ) “创造 的 防 错 原 则 ( Poka-Yoke Principle ) 指出 设计 师 通 过 对 产 
品 设 置 的 约束 来 防止 用 户 产 生 无 心 的 错误 。 即 使 错误 发 生 ， 系 统 也 可 以 协 
助 用 户 调 太 其 行为 并 执行 正确 的 操作 。 当 用 户 操作 无 法 得 到 满足 时 ， 也 可 
以 通过 操作 功能 失效 的 反馈 来 提示 用 户 。 友 好 和 有 效 的 反馈 能 市 给 用 户 安 
全 感 ， 提 升 用 户 对 于 应 用 的 信任 感 。 

因此 ， 友 好 的 反馈 设计 应 该 做 到 以 下 几 扎 : 

由 设计 师 应 使 用 户 成 为 主动 的 一 方 ， 不 仅 能 向 系统 提出 要 求 ， 还 能 
直接 轻松 地 操作 。 

@) 由 于 移动 应 用 移动 高 效 的 特点 ， 界 面 应 该 给 予 用 户 即 时 和 积极 的 
反馈 ; 将 反馈 的 状态 进行 分 类 ， 根 据 不 同情 况 进行 差异 化 设计 。 

(3) 和 若 用 户 的 操作 失败， 系统 应 该 根据 实际 情况 以 简单 明了 的 形式 告 
知 操作 失败 的 原因 ， 以 及 修复 的 方法 。 

(4) 对 于 音 见 或 影响 较 小 的 错误 操作 ， 要 如 免 过 度 反 馈 ， 以 免 给 用 户 
市 来 不 必要 的 心理 负担 。 

(3) 对 于 重要 的 操作 ( 删除 、 放 弃 、 关 闭 等 ) ， 系 统 要 提供 撤销 的 选 
项 供用 户 选 择 。 

(6) 反 饥 提示 要 避免 遮挡 用 户 可 能 需要 玛 看 或 操作 的 对 象 ， 不 打 断 用 
户 的 思路 和 任务 流 。 

( 3) 对 重用 户 的 心理 模型 

尊重 用 户 的 心理 模型 就 是 要 求 设计 师 站 在 用 户 的 角度 ， 使 应 用 的 功能 
和 和 操作 界面 尽量 符合 用 户 通 过 日 常 经 验 衍 生出 的 对 系统 和 环境 的 印象 。 应 
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移动 应 用 界面 的 设计 方法 与 实践 


用 界面 呈现 的 设计 内 容 与 用 户 心 理 模 型 越 匹 配 ， 用 户 对 移动 互联 网 应 用 界 
面 的 体验 就 越 好 。 反 之 则 会 增加 用 户 的 认 知 负担 及 学 习 成 本 。 例 如 ， 在 进 
度 条 的 设计 中 ， 用 户 通常 认为 连续 和 加 速 型 的 进度 条 更 有 效率 。 另 外 ， 诺 
贝尔 经 济 学 奖 获得 者 丹尼尔 . 卡 恩 曼 ( Daniel Kahneman ) “所 提出 的 峰 
终 定律 ( Peak-End Rule ) 指出 用 户 对 产品 的 体验 记忆 取决 于 高 峰 
( Peak ) 时 的 感觉 和 结束 ( End ) 时 的 感觉 。 如 果 在 高 峰 和 结尾 都 是 愉悦 体 
验 ， 那 么 整个 体验 就 是 愉悦 的 。 心 理学 家 唐纳德 A. 诺 曼 ( Donald A. 
Norman ) 也 提 到 : 一 个 漫长 不 愉快 的 等 待 ， 如 果 在 结束 时 稍微 增加 些 愉 
快 的 成 分 ， 那 么 整个 过 程 的 感受 甚至 会 变 得 更 积极 。 因 此 ， 在 设计 进度 条 
时 应 该 尽量 避免 明显 的 停顿 ， 若 遇 到 需要 用 户 等 待 的 情况 ， 则 可 以 采用 先 
慢 后 快 的 设计 方法 ( 见 图 5-17 和 图 5-18 ) 。 





刚 开 始 降低 用 户 的 期 待 


随后 超越 用 户 的 期 待 

















和- | www.google.com/searc | 三 问 扣 和 目 :Wwww.google.col | 三 问 
Google 你 好 X a 


网 页 “图片 ”地 图 视频 ”更 多 





你 好 Chinese English dictionary 你 
好 translate 你 好 pinyin - Mdbg 
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5-18 ” Chrome 浏览 器 进度 条 设计 


笨重 用 户 的 心理 模型 在 移动 应 用 交互 设计 中 主要 表现 在 网 个 方面 : 新 
应 用 界面 设计 与 已 有 应 用 界面 迭代 设计 。 针 对 新 应 用 ， 为 了 使 设计 符合 用 
户 的 心理 模型 ， 可 以 采用 用 户 已 有 的 经 验 ， 将 这 种 经 验 映射 到 设计 中 。 通 
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过 运用 用 户 的 心理 模型 ， 使 用 户 快速 理解 移动 应 用 中 各 元 素 的 含义 及 功能 
的 操作 方法 。 例 如 ， 将 现实 生活 中 常见 的 元 素 应 用 到 应 用 设计 中 。 当 一 款 
软件 被 更 新 后 ， 用 户 会 通过 与 最 初 设计 的 相似 度 来 判断 它 的 操作 方式 。 也 
就 是 说 ， 用 户 通 常 倾向 于 选择 那些 与 他 们 记忆 中 相似 的 设计 ， 很 难 在 较 短 
时 间 内 接受 阴 生 的 系统 。 对 于 移动 应 用 迭代 版 本 所 作出 的 较 大 调整 ， 容 易 
出 现 用 户 无 法 适应 的 情况 ， 因 此 设计 需要 在 符合 用 户 心 理 模型 的 基础 上 ， 
进行 循序 渐进 地 改变 。 

( 4) 打造 聪明 的 应 用 

聪明 的 移动 应 用 要 避免 让 用 户 做 过 多 设置 ， 当 用 户 输入 一 次 后 ， 应 用 
要 能 记 住 用 户 的 信息 ， 而 无 须 用 户 重新 或 反复 输入 。 

尽量 让 用 户 多 浏览 信息 ， 而 不 是 强迫 用 户 注册 或 者 登录 。 如 果 必 须 登 
录 ， 一 种 方式 是 支持 用 户 通 过 别 的 账号 登录 ， 无 须 用 户 重 新 注册 ( 见 
图 5-19 )， 男 一 种 方式 是 运用 简短 的 语言 直接 告知 用 户 注册 或 者 登录 
的 好 处 。 


eeee 中 国 移动 令 16:03 @ 7 * 98% mm eeeee 中 国 移动 会 六 16:04 全 7 * 98% mm 


取消 微 博 登 录 





随时 码 址 


5 微 博 哺 呈 
皮 现 新 鲜 事 ! 


人 S 切换 账号 


加 E 


》 微 博 账号 登录 
站 


号 登录 
居 QQ 账号 登录 该 应 用 将 访问 你 的 公开 资料 ， 好 友信 息 。 


更 多 权限 : 
手机 号 登录 注册 
二 手机 号 登录 注册 DY ~ 发 送 私信 和 邀请 给 你 的 微 博 好 友 
| 
微 博 


5-19 ” 啦 哄 登录 


设计 师 不 仅 要 关注 应 用 的 内 容 ， 还 要 在 形式 上 使 应 用 看 起 来 于 聪明 。 
例如 ，i0S 设备 一 般 有 横 屏 与 坚 屏 两 种 不 同 的 使 用 模式 ， 应 用 要 能 随 看 显 
示 环 境 和 故 寸 变化 而 自动 切换 两 种 模式 ， 使 用 户 能 轻松 自在 地 使 用 应 用 
( 罗 图 5=20 
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idaily | Global Point of View 每 日 环球 视野 伦敦 4/12 0% 





February 26, 2015 


美国 宇航 员 Terry Virts 在 国际 空间 站 外 架设 电缆 。 此 
次 太空 行走 任务 由 NASA 宇航 员 Terry Virts 与 
Barry Wilmore 共同 执行 ， 持 续 6 小 时 41 分 钟 ， 共 架 
设 超过 300 英 尺 长 的 电缆 。 摄 影 师 : NASA 


证 外 架设 电线 8 走 人 
y Wilmore 共 F 司 执行 = 3 小 时 41 分 


摄影 师 : NASA 





镭 ) 距离 我 6827.03 KM [2 
5-20 ”iDaily 横竖 屏 模式 


另外， 用 户 购买 商品 的 体验 近年 来 就 得 到 很 大 提升 。 当 用 户 单 击 购买 
后 便 可 以 通过 快捷 支付 迅速 完成 购买 动作 ， 无 顷 像 之 前 那样 重复 输入 信用 
卡 信息 、 个 人 信息 。 因 此 ， 设 计 师 需要 从 多 个 方面 打造 聪明 的 应 用 ， 不 放 
过 任何 一 个 提升 用 户 体验 的 机 会 。 一 个 微小 的 优化 有 时 能 市 来 上 亿美 元 的 
鱼 利 ， 而 用 户 群 也 会 更 加 忠 城 。 

为 移动 应 用 进行 交互 设计 是 一 性 的 工作 ， 对 设计 师 的 知识 面 、 
思维 方式 、 设 计 品 位 、 个 人 能 力 、 行 业 精 神 等 都 有 较 高 要 求 。 除 了 上 述 交 
互 设计 原 则 之 外 ， 界 面具 体 的 信息 架构 、 用 户 行为 流程 、 寞 面 导 航 、 用 户 
输入 模式 、 界 而 动态 效果 、 不 同系 统 平台 的 交互 特性 等 都 属于 交互 设计 过 
程 中 需 重 点 考虑 的 内 容 与 因素 。 设 计 师 应 该 在 遵循 相关 原则 的 基础 上 ， 语 
有 创新 精神 ， 深 入 了 解 用 户 需 求 ， 为 用 户 创造 一 个 真正 好 用 的 移动 产品 。 


2. 2 内 容 与 要 品 


信息 来 构 





5.2.1 整体 框架 


看 见 一 栋 建筑 时 ， 它 的 外 观 、 涛 江 弟 剃 是 最 先 豚 引 眼 球 的 地 方 ， 而 学 习 到 
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建筑 相关 知识 后 便 会 发 现 ， 建 和 贷 里 的 结构 才 是 一 栋 建 筑 的 核心 ( 见 图 5-21 )。 
在 修建 房屋 时 ， 工 程 师 一 般 会 先 做 结构 设计 再 做 内 外 部 疹 饰 设计 。 


ze 
ee - 


aa “he 了 
zh ~ 
ji Pn 





5-21 建筑 结构 
( 图 片 来 源 : www.Behance.com ) 


对 于 移动 应 用 软件 而 言 ， 信 息 架 构 同 样 重要 。 有 了 清晰 的 框架 ， 用 户 
就 能 快速 查看 页 面 ， 寻 找到 需求 信息 。 

信息 架构 要 求 设 计 师 具备 较 高 的 逻辑 思维 能 力 ， 将 信息 进行 组 织 、 分 
类 、 排 列 ， 在 保证 优良 用 户 体验 的 基础 上 ， 建 立 起 关系 明确 的 软件 信息 结 
构图 。 

信息 架构 是 在 用 户 任务 的 基础 上 将 界面 信息 的 整体 结构 与 具体 功能 规 
范 化 的 过 程 。 任 务 模型 侧重 分 析 用 户 的 操作 行为 ， 信 息 架 构 则 强调 如 何 表 
现 界面 中 的 具体 功能 ， 二 者 虽 处 于 应 用 界面 设计 的 不 同 阶段 并 分 别 扮演 不 
同 的 角色 ， 但 它们 之 间 存 在 着 相互 参照 和 影响 的 关系 。 下 文 介绍 的 流程 图 
用 来 整理 和 呈现 信息 架构 中 各 元 素 的 顺序 、 选 项 以 及 逻辑 关系 。 

不 同 设备 平台 上 的 信息 架构 存在 很 大 差异 ， 设 计 师 需要 依据 不 同 设备 
平台 的 界面 空间 ， 适 时 地 梳理 信息 ， 合 理 地 做 信息 架构 的 加 法 或 减法 ( 见 
图 5-22 )。 若 是 将 同一 个 应 用 分 别 适 配 在 不 同 的 设备 之 中 ， 则 需要 在 保证 使 
用 统一 设计 形式 和 使 用 体验 的 基础 上 ， 将 界面 中 的 元 素 进 行 有 效 的 组 织 。 
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图 5-22 不 同 设备 中 的 信息 架构 示意 图 


) 信息 染 构 设计 
na Architecture，IA) 又 叫做 信息 的 组 织 结构 ， 最 
早 由 美国 建筑 师 Richard Saul Wurman 于 1975 年 提出 。 在 软件 领域 ， 信 息 
架构 概念 最 早 来 源 于 数据 库 设计 。Morville 和 Rosenfeld” “在 《Information 
Architecture for the World Wide Web》 一 书 中 ， 将 信息 架构 概括 为 数字 
领域 的 一 门 新 兴学 科 和 社会 实践 。 它 支持 信息 与 体验 的 可 用 性 和 可 寻 性 ， 
在 人 们 共 至 信息 环境 的 结构 形式 中 ， 将 组 织 、 标 伴 、 搜 索 和 导航 系统 进行 
整合 。Len Bass 和 Paul Clements” 等 认为 : 一 个 程序 或 计算 系统 的 软件 
信息 染 构 是 系统 的 一 种 或 一 组 结构 ， 它 包含 软件 元 素 、 这 些 元 素 的 外 部 可 
0 以 及 元 素 之 间 的 关系 。 信 息 染 构 看 重 于 合理 地 设计 信息 与 功能 
组 织 分 类 和 导航 结构 ， 为 用 户 认 知 和 信息 之 间 搭 起 一 座 沟通 桥梁 ， 使 用 户 
能 够 高 效 地 获取 信息 。 
信息 染 构 的 基本 单位 是 太 幢 ， 染 构 过 程 就 是 对 不 同 刷 所 的 组 织 和 排 
列 。 杰 西 . 詹姆斯 加 瑞 特 (Jesse James Garret)” 将 信息 架构 分 为 线性 
结构 、 树 状 结 构 、 和 矩阵 结构 、 自 然 结构 4 种 基本 类 型 。 线 性 结构 拥有 连 
吐 和 流畅 的 结构 形式 ， 市 上 尽 与 廊 凡 ee 它 前 被 用 在 小 规模 及 
言 上 息 内 容 较为 单一 的 结构 模式 中 。 树 状 结构 是 指 一 个 太 扩 与 其 他 相关 市 所 
间 有 父 级 或 子 级 的 关系 。 子 证 挟 从 属于 父 太 上 凡 ， es 
五 点 。 和 矩阵 结构 是 指 节 点 与 节 辟 之 间 沿 着 两 个 或 三 个 的 维度 移动 ， 它 存在 
行 与 列 的 交叉 形态 。 在 设计 上 表现 为 围 Ue 提供 三 种 或 三 种 以 
下 的 解决 方案 。 在 自然 结构 中 ， 太 凡 被 逐一 连接 起 来 ， 疫 有 分 类 和 遵循 任 
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何 一 种 模式 的 概念 。 自 然 结构 比 较 适 合 于 引导 用 户 进行 探索 活动 ， 如 娱乐 
或 游戏 设计 等 。 

( 2 ) 移动 应 用 信息 染 构 设计 

由 于 移动 应 用 受到 移动 设备 屏幕 、 用 户 使 用 方式 等 条 件 的 限制 ， 其 功能 
架构 一 般 在 树 状 结构 的 基础 上 进行 。 移 动 应 用 信息 架构 可 以 分 为 4 种 基本 类 
型 : 浅 而 广 、 浅 而 窄 、 深 而 广 和 深 而 窄 的 信息 架构 方式 ( 见 图 5-23 ) 。 


深度 























5-23 ”移动 应 用 界面 的 信息 架构 方式 


由 浅 而 广 : 信息 的 排列 具有 一 定 的 规律 ， 并 围绕 一 个 中 心 点 向 下 遍 


平地 发 散 。 
@) 浅 而 窄 : 属于 轻 量 级 的 信息 排列 方式 ， 能 辅助 用 户 快速 获取 
信息 。 


8) 深 而 广 : 不 限制 信息 的 宽度 和 深度 ， 每 一 个 廊 扣 下 都 有 无 数 种 可 
能 。 在 获取 信息 时 ， 用 户 需 要 经 过 一 定 的 步骤 和 流程 才能 成 功 。 

由 深 而 窄 : 限制 信息 的 宽度 ， 信 息 内 容 会 往 下 不 断 扩 展 。 用 户 需 要 
进一步 往 下 操作 ， 才 能 达到 获取 最 终 信 息 的 目的 。 

在 这 4 种 基本 形式 中 ， 人 的 大 脑 在 处 理 信 息 时 ， 最 容易 接受 很 浅 或 很 
窑 的 信息 结构 。 也 就 是 说 ， 浅 而 窄 是 最 符合 大 众 思 维 模 式 的 信息 架构 方 
式 。 例 如 ， 手 机 通讯 录 的 设计 ， 用 户 能 按照 字母 排列 的 顺序 快速 便 找 联系 
人 。 此 外 ， 在 游戏 等 其 他 娱乐 型 应 用 中 ， 信 息 的 染 构 方式 弟 被 设计 成 深 而 
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广 的 形式 。 用 户 需要 在 操作 中 ， 进 行 思 考 和 探索 才能 找到 最 终 的 答案 。 

综 上 所 述 ， 思 考 移 动 应 用 信息 染 构 的 方式 ， 需 要 结合 移动 设备 和 移动 
应 用 的 特点 。 人 们 在 使 用 移动 应 用 时 ， 一 般 会 受到 以 下 5 个 客观 条 件 的 限 
制 : 手机 设备 屏蔽 较 小 、 网 络 性 能 偏 低 、 电 池 续 航 时 间 短 、 输 入 方式 多 为 
拇指 或 触摸 输入 、 移 动 设备 使 用 场景 复杂 多 变 。 因 此 ， 移 动 应 用 信息 染 构 
要 尽量 做 到 占用 时 间 短 、 功 能 简单 、 操 作 简 便 以 及 信息 量 小 等 ， 具 体 方法 
如 下 。 

(DD 要 进行 轻 量 级 信息 的 编排 。 移 动 应 用 的 信息 组 织 需要 重点 聚焦 于 
用 户 的 核心 任务 ， 减 去 多 余 信 息 ， 并 依据 移动 设备 的 特 幢 ， 尽 量 采 用 局 平 
化 的 信息 染 构 方式 。 此 外 ， 为 了 遵循 用 户 的 实际 思维 与 操作 习惯 ， 应 用 淋 
构 要 尽量 设计 得 浅 而 罕 ， 保 证 信息 组 织 的 流畅 。 

(2 要 尽量 减少 层级 与 输入 。 用 户 一 般 利 用 碎片 化 时 间 来 使 用 移动 应 
用 ， 因 此 信息 染 构 中 的 层级 不 宜 太 深 或 太 复杂 ， 应 尽量 减少 多 层级 的 分 
类 、 节 点 之 间 横 纵向 的 跳 转 ， 平 衡 信息 层级 的 深度 和 和 广度。 同时 结合 移动 
的 特性 ， 减 少 不 必 要 的 操作 步骤 。 在 输入 方式 上 ， 移 动 应 用 应 该 多 提供 可 
选项 ， 减 少 用 户 手 动 输入 信息 。 

(3) 要 进行 清晰 的 分 类 和 准确 的 命名 。 移 动 应 用 的 信息 架构 要 在 符合 
用 户 心 理 模 型 的 前 提 下 ， 进 行 功能 分 类 。 各 功能 与 任务 之 间 的 逻辑 清晰 ， 
命名 需要 保证 准确 和 易 懂 ， 不 能 使 用 过 于 专业 的 词汇 。 





5.2.2 行为 体验 深 程 谍 

从 故宫 的 乌 隔 图 可 以 看 到 故宫 中 的 主要 宫殿 都 沿 着 中 轴线 建立 ， 游 客 
一 般 也 会 疝 着 中 间 的 直线 进行 参观 ( 见 图 5-24 ) 。 但 仔细 研究 游客 的 参 
观 路 线 可 以 发 现 : 根据 个 人 偏好 、 习 惯 的 不 同 ， 很 多 游客 会 打破 直线 的 参 
观 流程 而 出 现 折线 的 情况 ， 如 图 5-24 和 右 图 中 参观 点 1]、2、3、4 中 的 地 
点 2 有 可 能 会 被 重复 游览 。 参 观 的 流程 就 是 一 种 行走 、 观 看 、 互 动 体验 的 
过 程 ， 任 何 一 个 细节 都 会 影响 参观 者 对 于 故宫 的 印象 。 例 如 ， 每 一 个 宫殿 
中 是 否 有 详细 的 文字 、 图 片 、 影 像 解 说 ， 院 内 的 指示 系统 是 否 能 帮助 用 户 
了 解 自己 所 在 的 位 置 ， 从 而 避免 在 院内 迷失 方向 。 
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人 们 在 做 一 件 事 情 时 ， 会 期 竺 一 个 上 顺利、 愉悦 的 办 事 过 程 。 正 是 因为 
有 有 这样 一 种 惯性 的 思维 模式 ， 人 们 在 操控 界面 时 ， 也 会 希望 整个 流程 是 便 
捷 、 顺畅 以 及 美好 的 。 因此 ， 移动 应 用 界 加 操作 流程 的 设计 是 交互 设计 环 
三 中 至 关 重 要 的 一 环 。 Oe 有 直线， 这 是 因为 直线 的 
操作 体验 会 使 用 户 感 觉 更 加 顺畅。 每 一 项 功能 都 能 看 作 是 直线 上 的 一 个 小 
国 宙 原作 何 一 A 

流程 图 (Flow Diagram ) 是 以 简单 的 图 形 和 文字 说 明 的 形式 来 表现 
的 ， 用 于 说 明 应 用 界面 中 一 个 或 多 个 任务 过 程 中 各 个 环 万 进行 的 顺序 和 关 
系 。 在 移动 应 用 界面 中 ， 流 程 图 与 用 户 任务 模 型 中 的 过 程 、 顺 序 和 决策 联 
系 紧密 ， 主 要 用 来 辅助 设计 师 理 清 思 路 ， 设 计 并 验证 交互 流程 中 各 元 素 间 
关系 与 逻辑 的 合理 性 。 流 程 图 一 般 包 含 任 务 起 点 、 任 务 终点 、 任 务 步 又 、 
任务 路 径 、 任 务 决策 点 和 任务 名 称 

交互 的 动作 流程 可 以 分 为 渐进 式 交互 、 往复 交互 和 随机 交互 人 
图 5-25 )。 ”渐进 式 交互 指 按照 事先 预定 的 程序 一 步 一 a 
务 ， 往 复 交 互 指 动 作 从 一 个 点 出 发 到 另外 一 个 点 ， 再 回 到 原点 的 循环 流 
程 ， 随 机 交互 指 动作 的 开始 和 结束 是 不 确定 的 ， 具 有 随机 性 的 特点 。 = 
阳 教 授 和 认为 交互 设计 的 核心 是 : 人 ( People )、 动 作 ( Actions )、 完 成 
动作 必要 的 辅助 工具 ( Means )、 周 围 环境 ( Contents ) 和 目的 ( Purpose )。 
交互 设计 的 重要 任务 就 是 设计 一 个 相对 理想 的 流程 (一 系列 动作 及 环境 ) 
使 人 顺利 地 完成 菏 个 特定 任务 ( 目的 )。 移 动 应 用 界面 的 交互 流程 图 一 般 
去 用 渐进 式 交 互 与 往复 交互 的 形式 。 


A 一 一 B 一 一 C—O DE 


闪 要 
TAR 
BE 
hd 
有 


良 D 一 2D 交互 流程 的 分 类 
( 资料 来 源 ， 辛 向 阳 《 混沌 中 浮现 的 交互 设计 》 ) 
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移动 应 用 界面 的 交互 流程 图 用 于 摘 述 用 户 在 应 用 中 的 行为 路 径 ， 产 品 
研发 团队 通 弟 可 以 根据 服务 古 日 志 收 集 到 的 数据 来 显示 用 户 浏 览 整个 应 用 
信息 架构 的 行为 方式 。 交 互 流程 图 是 用 户 执行 弟 见 任务 的 理想 路 人 径 。 

流程 图 是 用 户 目 标 路 线 的 地 图 。 在 地 图 里 ， 用 户 的 任何 一 步 操 作 均 需 
要 被 考虑 到 。 用 户 在 流程 中 的 操作 ， 系 统 需 要 给 出 即时 的 校 验 反馈 。 例 
如 ， 当 用 户 和 面临 选择 时 ， 单 击 “ 是 ”或 “人 否 ” 之 后 的 界面 信息 呈现 选择 正 
确 或 和 销 误 后 的 界 和 面 反馈 信息 以 及 相应 的 返回 按钮 。 一 般 来 总 ， 界 面 流程 图 
是 一 个 完整 和 循环 的 动作 指引 。 为 了 保证 良好 的 用 户 体验 ， 设 计 师 需要 将 
流程 图 设计 得 尽 可 能 简单 和 顺畅 。 图 5-26 所 示 是 用 户 和 首次 进入 一 个 界面 
的 过 程 及 其 决策 分 析 流 程 图 ， 当 用 户 发 现 疫 有 注册 时 ， 便 要 进行 注册 活 
动 ， 当 输入 账号 或 密码 销 误 时 ， 便 要 重新 输入 。 


ANN 





进入 局 始 界 面 
5-26 ”首次 进入 界面 流程 
5-27 所 示 是 三 个 供用 户 选 择 的 不 同 的 流程 图 ， 它 们 都 代表 从 一 个 
总 到 另外 一 个 总 的 单线 程 动作 。 当 从 A 氮 出 发 ， 面 临 两 种 选择 时 (B 和 
C )， 设 计 师 需要 将 其 中 一 个 选项 作为 默认 选项 ， 并 用 视 竟 化 的 效果 进行 明 
显 的 区 分 ; 如 软 认 从 A 挟 到 B 点 ， 将 B 挟 做 视 交 化 区 分 引导 用 户 扩 击 。 





同 理 ， 当 存在 两 个 入 口 (A 和 B)， 到 最 终点 C 时， 设计 师 可 以 将 其 中 一 
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个 入 口 作为 默认 点 ， 并 将 其 设计 得 以 强化 ， 如 默认 从 A 点 出 发 到 C 点 ， 
将 A 点 在 视觉 上 进行 强化 处 理 ， 弱 化 B 点 。 当 一 个 流程 图 包含 两 个 分 支 
流程 (B 和 C ) 时 ， 则 可 以 通过 一 个 单独 的 模块 来 完成 ， 尽 量 做 到 流程 的 
顺畅 。 例 如 ， 将 B 点 中 的 操作 ( B1 和 B2 ) 分 模块 进行 ， 用 户 可 以 单 击 B 
点 进行 单独 操作 ， 这 样 也 不 影响 整体 流程 的 流畅 性 。 
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5-27 ” 尽 到 扣 选 择 流程 的 优化 示例 


5.2.3 ”交互 式 导 般 的 构建 


如 果 说 信息 架构 与 流程 图 是 界面 交互 设计 的 基础 ， 那 么 导航 就 是 交互 具 
体 的 表现 形式 ， 用 来 指引 用 户 在 正确 的 方向 使 用 应 用 。 随 看 互联 网 时 代 信 息 
量 的 飞速 增长 ， 网 页 中 所 呈现 的 信息 越 来 越 多 ( 见 图 5-28 ) ， 用 户 容易 迷 
失 在 庞大 和 繁杂 的 内 容 之 中 。 这 个 时 候 ， 导 航 的 重要 性 就 凸显 出 来 了 。 
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5-28 网 页 导航 的 变迁 
( 图 片 来 源 :， www.Truthtacts.con) 


导航 ( Navigation ) 是 指引 用 户 从 一 操 行 动 到 另 一 点 的 方法 ， 单 见于 
互联 网 网 站 设计 。 艾 伦 . 库 伯 ( Alan Cooper ) “认为 任何 将 用 户 带 到 新 
的 界面 部 分 、 定 位 对 象 、 工 具 或 者 数据 的 动作 都 是 导航 。 在 一 个 网 站 中 ， 
由 于 全 部 信息 无 法 展现 在 一 个 页 面 以 内 ， 因 此 需要 提供 页 面 之 间 跳 转 的 链 
接 。 导 航 正 是 组 织 和 引导 这 些 链接 的 媒介 ， 以 帮助 用 户 高 效 完成 任务 。 正 
如 道格拉斯 K. 范 杜 月 ( Douglas k.Van Duyne ) “等 人 提出 用 户 不 是 总 能 
找到 链接 ， 并 且 不 知道 链接 会 将 其 市 到 何方 ， 因 此 导航 是 每 个 网 站 中 的 重 
要 模块 。 不 仅 如 此 ， 用 户 还 能 通过 导航 了 解 网 站 中 页 面 与 页 面 、 页 面 中 内 
容 与 内 容 之 间 的 关系 。 由 此 得 出 ， 导 航 是 用 户 动 作 触 发 的 指南 针 ， 在 整个 
体验 过 程 中 起 到 关键 作用 。 

(1 ) 网 站 导航 

剃 见 的 网 站 导航 按 作 用 主要 分 为 三 种 类 型 ， 公 共 导 航 、 结 构 化 导航 与 
关联 性 导航 。 

由 公共 导航 : 页 头 导 航 和 页 尾 导航 是 构成 网 站 公共 导航 的 形式 ， 它 
们 出 现在 网 站 的 每 一 个 页 面 ， 显 示 帝 用 信息 、 音 用 操作 链接 或 按钮 等 ， 如 
用 户 名 、 企 业 的 L090、 热线 电话 、 中 严 文 切换 等 。 

( 结构 化 导航 : 基于 内 容 的 核心 导航 形式 ， 主 要 分 为 全 局 导航 、 向 
包 必 导航、 局 部 导航 三 种 类 型 。 全 局 导航 相 面 包 履 导航 是 网 站 架构 中 的 核 
心 ， 由 于 用 户 在 浏览 网 页 时 的 眼睛 运动 轨迹 主要 围绕 字母 “F” 展 开 ， 
此 重要 的 导航 应 放置 于 网 站 页 面 的 顶部 ( 页 头 导 航 之 下 ) ; 全 局 导航 中 所 
提供 的 关键 词 链 接 是 对 整个 网 站 内 容 的 概括 ， 用 户 能 通过 全 局 导航 到 达 任 





小 设计 大 思维 一 一 移动 应 用 界面 的 设计 万 法 与 实践 


何 一 个 一 级 页 面 后 再 进行 轻易 切换 ( 到 其 他 一 级 页 面 ) ;而 面包 届 导 航 能 
通过 用 户 浏 览 页 面 的 轨迹 清晰 地 告知 用 户 在 网 站 中 的 位 置 ， 在 提供 轻松 返 
回 历史 至 看 页 面 的 基础 上 ， 使 用 户 在 网 站 中 不 至 于 迷失 方向 ;局 部 导航 出 
现在 网 页 的 左右 两 边 ， 提 供 了 当前 页 面 中 二 级 内 容 的 链接 ， 使 用 户 能 在 当 
前 页 到 看 不 同 信 息 。 

(3) 关联 性 导航 : 属于 网 页 中 的 附加 导航 ， 有 相关 推荐 、 快 速 链接 、 
上 上 下文 导航 三 种 具体 形式 ， 企 业 可 以 通过 下 拉 框 的 形式 提供 关联 信息 的 链 
接 ， 广 告 、 活 动 等 网 站 运营 型 的 内 容 会 使 用 此 种 类 型 的 导航 。 互 联网 网 站 
的 导航 见 图 5-29。 


和 





国内 用 户 访问 点 


关联 导航 (相关 推荐 ) 国外 用 户 访问 点 





即时 通讯 业务 


Dc | .en 


无 线 互联 网 增 他 业 劳 ee , gs 
腾讯 网 (WwW.QQ.com) 是 中 国 豚 大 的 中 交 门 户 网 站 , 是 腾讯 公司 推出 的 集 新 闻 信 息 、 互 


动 娱乐 业 应 汛 网 oe | 加 
ER (OLR 动 社区 、 娱 乐 产 品 和 基础 服务 为 一 体 的 大 型 综合 门户 网 站 , 膀 讯 网 服务 于 全 球 华 人 用 
区 生生 是 务 户 ， 致 力 成 为 最 具 传 播 力 和 互动 性 ， 权威、 主流 、 时 人 尚 的 互联 网 媒体 不 台 * 通过 强大 





电子 责 盆 的 天 时 新 闻 和 全 面 闻 大 的 信息 资讯 服务 ， 为 中 国 数 以 亿 计 的 互联 网 用 户 提供 言 有 人 | 营 


广告 业务 局 部 导航 的 网 上 新 生活 。 





人 使 用 订 款 | 法 律 声 明 | 客户 服务 | 监督 举报 | 加 入 腾讯 | 合作 洽谈 | 网 站 地 图 | 粤 网 文 [2011]0483-070 号 页 尾 导航 





5-29 互联 网 网 站 的 导航 
( 底 图 来 源 : www.tencent.com/zh-cn/index.shtm1]) 


(2 ) 移动 应 用 导航 

不 同 于 网 站 导航 ， 移 动 应 用 界面 导航 没有 固定 的 形式 ， 其 目标 是 展示 
寞 面 中 的 核心 信息 与 操作 ， 帮 助 用 户 快 速 实现 目标 。 

方向 : 移动 应 用 界面 一 般 沿 着 X、Y、2 轴 的 方向 进行 延伸 ( 见 
图 5-30 ) 。X 轴 用 来 指导 用 户 的 操作 ， 如 从 当前 页 跳 转 到 下 一 页 ; Y 轴 主 
要 的 功能 是 方便 用 户 上 下 滑动 浏览 信息 ， 使 信息 在 视觉 上 具有 连贯 性 ， 如 
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用 手指 上 下 靖 玛 浏览 新 闻 等 ; 而 2 轴 则 用 来 帮助 用 户 了 解 更 加 详细 的 信息 
以 及 指导 用 户 进 行 具体 的 操作 ， 如 查看 页 和 面 详情 、 进 行 购买 等 。 





Y 浏览 
> 人 (页 面相 互 关 联 ) 
忆 : 
网 
信息 的 深度 
切换 
《页 面相 互 独立 ) 
和 入 





图 5-30 移动 应 用 导航 的 方 加 


X 轴 上 的 页 面相 对 独立 ， 而 Y 轴 页 面 中 的 内 容 具 有 一 定 的 连贯 性 。 如 
5-30 所 示 ，X 轴 展 现 了 A2、B2、fC2 三 个 独立 的 内 容 ; Y 轴 则 展现 了 
B1、B2、8B3 三 个 连续 性 内 容 ; 7 轴 是 基于 当前 独立 页 面 内 容 的 延续 。 
如 图 5-31 所 示 ， 单 击 C2 页 面 中 具体 的 内 容 ， 便 可 以 查看 详情 页 面 C2-1、 


[= 
@ 层次 : 移动 应 用 界面 由 外 到 内 依次 被 分 为 第 四 、 三 、 二 、 一 层 ， 
共 四 层 。 第 三 层 是 应 用 的 核心 ， 也 就 是 表现 整体 框 染 的 主 界面 。 


3) 分 类 : 主 界面 导航 和 次 级 界面 导航 。 
主 界 面 导 航 : 整个 导航 系统 的 中 心 ， 影 响 整体 界面 布局 、 操 作 与 交互 
方式 的 核心 要 素 。 主 界面 导航 通 前 用 来 秋 现 界面 的 主要 绪 构 与 框 慷 。 

次 级 界面 导航 : 表现 界面 中 具体 的 结构 与 交互 方式 。 次 级 界面 导航 用 
于 对 界面 中 具体 内 容 进 行 组 织 与 排列 ， 配 合 主 界面 导航 样式 ， 使 界面 导航 
形成 一 个 完整 的 系统 。 
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第 四 层 : 控件 引导 
第 一 层 : 具体 内 容 
上 第 二 层 : 次 级 界面 导航 


第 三 层 : 主 界面 导航 


图 5-31 ”移动 应 用 界面 导航 的 结构 与 分 类 


( 3 ) 移动 应 用 界面 主要 的 导航 样式 及 设计 方法 

移动 应 用 界面 主要 的 导航 样式 有 标签 导航 、 人 入 口 导 航 、 侧 靖 导 航 、 列 
表 导 航 、 抽 层 导 航 、 全 男 幅 导航 、 全 屏 导 航 。 

1 ) 标签 ( Tab ) 导航 (前 用 于 主 界 和 面 导航 与 次 级 界面 导航 )。 

标签 导航 ( 见 表 5-1 ) 来 产 于 果 面 浏览 履 ， 其 作用 是 将 已 经 打开 的 网 
页 以 标签 的 形式 进行 分 类 ， 以 万 便 用 户 在 多 网 页 中 进行 切换 。 标 釜 形式 很 
好 地 运用 了 物理 隐喻 的 原理 ， 有 效 地 避免 了 不 必要 的 页 面 跳 转 。 

移动 应 用 界面 中 的 标签 导航 主要 用 来 将 并 列 的 信息 通过 模 回 标签 的 形 
式 进行 区 分 ， 以 万 便 用 户 总 击 和 切换 不 同 信息 。 与 传统 的 染 构 方式 ( 如 列 
表 方 式 ) 相 比 ， 标 签 导 航 能 在 有 限 的 空间 里 展现 较 多 内 容 ， 并 减少 用 户 的 
氮 击 次 数 ， 提 高 操作 效率 。 通 单 情况 下 ， 移 动 应 用 界面 中 各 标签 之 间 应 该 
至 并 列 天 系 。 

随 看 触 措 屏幕 的 普及 ， 通 过 标签 改良 的 新 型 导航 形式 也 应 运 而 生 : 

由 当 导 航 展示 信息 为 两 个 的 时 候 ， 可 以 将 标签 的 形式 改良 为 通过 按 
钮 切换 信息 ， 而 按钮 的 操作 方式 既 可 以 是 点 击 又 可 以 是 亚 右 靖 动 ， 这 种 方 
式 能 使 用 户 与 界面 的 交互 更 加 自然 。 此 外 ， 值 得 注意 的 是 ， 标 签 上 不 同类 
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品尝。 名 下 导航 样式 举人 
< 可 ， 
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型 的 内 容 和 功能 应 尽量 保持 独立 。 在 一 个 屏幕 以 内 ， 只 人 允许 用 户 与 一 
要 的 功能 进行 交互 。 


表 5-1 标签 导航 


















Wennnnnnnnnn 


Fo r Whoee Good I Sci 区 ed> 


tr erp the ninctecnth century who 
magined the possibiliry of the artificia] creation of lif. 


What Killed My Sister? 


The answer — schizophrenia — only Jeads to more 
pemlexing questions. 


What Happens When Libertarians T... 


re united by oppositi 
re i comes to planni mp 


In side The Scan Business 


i 
enpinee a bandful of 





( 旋转 导航 是 标签 导航 的 一 种 新 型 样式 ， 主 要 通过 左右 滑动 或 单方 
器 滑动 ( 只 往 左 或 只 往 右 ) 切换 不 同 的 信息 ， 适 用 于 屏幕 空间 有 限 而 又 需 
要 展示 大 量 信息 的 应 用 界面 。 旋 转 导 航 内 的 信息 都 具有 相同 属性 ， 如 同属 
于 广告 信息 、 推 荐 内 容 、 搜 索 内 容 等 ， 在 电子 商务 应 用 中 较为 常见 ， 如 团 
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购 、 电 商 平 侣 、 电 影 等 。 旋 转 导 航 能 充分 利用 移动 设备 有 限 的 屏幕 空间 ， 
在 应 用 界面 的 一 个 模块 以 内 展示 一 系列 信息 。 

值得 注意 的 是 ， 设 计 师 需要 在 视 竞 上 告知 用 户 旋转 导航 内 的 信息 数 
目 ， 并 同时 告知 用 户 目前 所 在 的 位 置 。 例 如 ， 在 界面 下 方 用 两 个 焦点 表示 
一 共有 两 页 可 供 转 换 的 信息 ， 当 前 所 在 的 页 面 是 A 等 。 与 此 同时 ， 应 用 
界面 系统 还 要 文 持 用 户 循环 旋转 导航 内 的 信息 ， 如 导航 内 有 三 条 信息 ， 用 
户 能 一 直 往 左边 滑动 循环 查看 三 条 不 同 的 信息 。 旋 转 导 航 是 一 种 可 扩展 的 
导航 样式 ， 可 以 与 其 他 导航 形式 进行 结合 ， 以 便 在 一 个 屏幕 以 内 展现 更 多 
的 信息 。 

优点 : 可 以 使 用 户 在 相关 类 别 的 信息 中 频繁 切换 ; 告知 用 户 当前 的 位 
置 ， 不 会 让 用 户 迷 和 失 方 向。 

地点 ;导航 始终 出 现在 屏幕 中 ; 信息 被 明确 地 分 为 几 类 ， 将 重要 内 容 
的 入 口 规划 到 标签 中 。 

适用 : X 轴 选 项 较 少 ， 简 单 、 轻 便 的 信息 架构 。 

注意 : 标签 数量 不 宜 太 多 ， 一 般 控 制 在 5 个 以 内 。 

2 ) 入 口 导航 ( 常用 于 主 界面 导航 与 次 级 界面 导航 ) 。 

入 口 导航 ( 见 表 5-2) 也 被 称 为 “快速 启动 板 ”( Launchpad )， 登 5 
界面 中 的 选项 就 是 进入 各 个 内 容 的 起 点 。 入 口 导航 一 般 以 规整 的 方 格 形式 
出 现 ， 如 四 宫 格 、 六 宫 格 、 八 宫 格 、 九 宫 格 、 十 六 宫 格 、 二 十 宫 格 。 每 一 
个 格子 具有 相同 尺寸 ， 每 一 个 方 格 都 是 7 轴 有 具体 内 容 页 面 的 入 口 。 方 格 
之 间 的 信息 关联 度 较 低 ， 没 有 明显 的 从 属 层级 关系 。 根 据 应 用 界面 设 


计 的 具体 需要 ， 可 以 将 文字 、 图 形 、 照 片 、 动 态 效 果 图 等 内 容 整 合 到 
FN 


比 起 看 文字 ， 人 们 更 喜欢 看 丰富 多 彩 的 图 价 。 快 信息 读 图 时 代 ， 入 口 
导航 的 功能 不 仅 是 作为 下 一 级 页 面 的 入 口 ， 还 可 以 用 来 展示 具体 信息 。 例 
如 ， 在 电子 商务 应 用 界面 中 通过 方 格 展示 服 闻 的 缩 略 图 片 ， 各 用 户 看 到 中 
意 的 服装 便 会 直接 扣 击 图 片 进 入 界面 查看 详细 信息 。 以 图 片 作 为 方 格 内 容 
的 形式 ， 不 仅 能 帮助 用 户 快速 识别 信息 ， 其 直观 的 视觉 效果 还 能 在 情感 上 
为 用 户 市 来 愉悦 的 感受 。 例 如 ， 豆 闻 电 影 主 界面 就 将 电影 的 海报 放置 于 长 
方形 的 格子 内 ， 看 到 海报 就 能 大 致 判断 该 电影 的 类 型 、 风 格 等 天 键 信 息 ， 
无 须 过 多 的 文字 解释 。 
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表 5-2 入 口 导航 


名 称 导航 样式 举例 
O A 








人 


© PocKEr 次 
CHECK-UP 





因此 ， 入 口 导 航 方 格 中 的 内 容 可 以 根据 应 用 的 实际 情况 进行 设计 ， 方 
格 的 数量 也 要 避免 过 多 ， 以 免 影响 整个 交互 体验 。 

优点 : 提供 多 个 入 口供 用 户 快 速 选 择 ， 入 口 属性 展示 清晰 。 

特点 ， 将 信息 进行 独立 分 类 ， 入 口 之 间 关 联 度 较 低 ; 一 般 用 在 界面 的 
第 一 屏 。 

适用 .入口 较 多 的 页 面 ， 入 口 独立 且 固 定 。 

注意 : 不 适合 在 交叉 类 别 中 适用 ， 一 屏 以 内 入 口 避 免 太 多 。 

3 ) 侧 疹 导航 ( 单 用 于 主 宅 向 导航 )。 

侧 滑 导航 是 一 种 较 新 的 导航 模式 ， 它 由 左 屏 、 主 屏 和 右 屏 三 个 部 分 组 
成 ( 见 表 5-3 )。 在 移动 应 用 中 ， 移 动 社 交 应 用 Path 最 早 米 用 该 种 导航 形 
式 。 侧 疹 导 航 使 用 户 能 将 视线 聚焦 于 主 界面 的 信息 ， 而 其 他 操作 功能 则 通 





136 ”小 设计 大 思维 一 一 移动 应 用 界面 的 设计 方法 与 实践 


过 点 击 左 石 屏幕 中 的 信息 或 条 目 完成 。 这 使 得 主 界 面 内 容 更 加 简约 和 清 
上 晰 ， 也 使 雹 右 屏 幕 中 的 信息 和 操作 项 目 更 具有 扩展 性 。 例 如 ， 当 用 户 添 加 
好 友 后 ， 便 能 在 右 侧 屏 幕 中 一 看 最 新 列表 信息 。 


表 S$-3 侧 靖 导航 





除了 社交 应 用 以 外 ， 新 闻 应 用 、 浏 览 器 应 用 、 电 子 阅 务 应 用 等 都 襄 欢 
采用 侧 靖 导航 的 形式 。 但 侧 消 导 航 并 不 一 定 适 用 于 每 一 种 应 用 类 型 ， 设 计 
团队 和 设计 师 还 是 要 根据 应 用 的 功能 属性 和 用 户 需 求 来 进行 导航 设计 。 

优点 :将 阅读 区 与 功能 区 进行 了 良好 的 分 隔 ， 使 用 户 容易 沉浸 在 社交 
或 阅读 等 连贯 活动 中 ， 左 石 两 边 的 功能 可 扩展 性 强 ， 各 项 功能 方便 用 户 随 
时 调 出 。 

特点 以 Y 轴 浏览 、 轻 互动 、 轻 娱 朱 作为 应 用 的 主线 。 

适用 : 以 济 虹 为 主 的 应 用 ( 文字 、 图 片 、 影 像 )，SNS 应 用 、 新 闻 类 
应 用 。 

注意 : 不 适合 互动 性 踢 、 功 能 性 强 的 应 用 。 

4 ) 列表 导航 ( 前 用 于 次 级 界面 导航 )。 

列表 导航 在 移动 应 用 界面 中 比较 前 见 ， 属 于 传统 的 导航 方式 ( 见 
表 5-4 )。 例 如 ， 联 系 人 应 用 、 歌 曲 播放 应 用 、 邮 件 应 用 等 都 适合 采用 列 
表 导 航 的 形式 。 

列表 导航 中 栏目 之 间 的 内 容 相对 独立 。 从 属 关 系 较 弱 有 利于 快速 更 新 
列表 及 其 里 面 的 内 容 。 在 运用 列表 导航 时 ， 列 表 中 关键 词 或 天 键 内 容 的 表 
达 不 宜 太 复杂 ， 简 单 易 懂 的 信息 能 帮助 用 户 顺 利 完成 任务 。 一 个 列表 跳 转 
至 其 他 界面 的 层级 尽量 保持 在 两 步 以 内 ， 人 否则 将 会 出 现 导致 用 户 迷 失 方 向 
或 返回 成 本 过 高 的 问题 。 
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表 5-4 列表 导航 


ecnBeta 





re 从 各 美国 学 可 只 15000 






》 ; ;美国 防 部 开发 出 1.8 亿 像素 的 天 
。 人 抽 扫 像 关注 系 统 


# Office 365 家 庭 高 级 版 与 Office mC)  ; 
; ” ;2013 正式 上 a 一 ; 
8 ; © 


: 0 | 


> 
> : 
| ;设计 师 推 出 喷气 发 动机 概念 装 
更 多 li 


此 外 ， 在 一 个 界面 沁 围 内 ( 或 一 个 屏幕 以 内 )， 列 表 导 航 中 列 的 数量 
可 以 根据 移动 设备 屏幕 尺寸 和 每 列 显示 内 容 的 多 少 来 定义 。 
将 单独 表格 视 为 容器 ， 效 载 文字 或 图 标 并 指 生 相关 内 容 ， 逻 辑 
清晰 ， 通 过 列表 对 内 容 进行 分 类 存储 ， 方 便 用 户 但 看 并 操作 。 
位 于 最 上 方 的 列表 往往 比 位 于 下 方 的 列表 信息 更 重要 ， 列 表 里 
的 内 容 是 所 指 内 容 的 标题 ， 以 文字 表现 为 主 。 
适用 : 较 适 合 展 示 层 次 分 明 的 等 级 结构 ， 在 应 用 的 局 部 位 置 适用 
2 
注意 : 控制 好 列表 的 个 数 和 分 组 方式 ; 数量 保持 在 15 个 以 内 ; 若 数 
量 多 又 不 想 肝 分 一 级 ， ee 
5 ) 抽 居 导航 ( 音 用 于 次 级 界面 导航 )。 
ee 面 一 屏 以 内 信息 展示 过 长 
而 设计 的 界面 导航 形式 ， 其 目的 是 在 一 个 界面 内 展示 更 多 内 容 ( 见 表 5-5 )。 
导航 框 内 展示 的 信息 以 两 级 列表 的 形式 进行 分 组 ， 两 级 列表 之 间 存 在 
从 属 关 系 。 用 户 通 过 父 级 导航 展开 其 子 级 项 目 ， 父 级 信息 与 子 级 信息 的 设 
置 与 分 类 ， 不 仅 能 使 用 户 灵 活 地 隐 羧 或 显示 所 需要 的 信息 ， 还 能 减 小 信息 
对 屏幕 的 后 用 率 。 
优点 : 在 不 影响 应 用 界面 效果 的 前 提 下 ， 较 好 地 兼容 了 各 种 类 别 的 内 
容 ; 导航 扩展 了 Y 轴 在 平面 中 的 空间 。 
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表 S$-S$ 抽 居 导航 


举例 
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特点 : 将 子 级 内 容 进 行 隐 沁 ， 一 般 使 用 在 屏 人 幕 的 左右 两 边 。 

适用 : 入口 多 ， 人 入口 的 名 称 较 长 ; 信息、 功能 的 罗列 。 

注意 : 用 户 常用 的 信息 设置 为 默认 展开 ， 其 他 的 信息 则 收缩 至 抽 居 
内 ;， 抽 居 的 展开 和 收 起 状态 需要 在 视觉 上 进行 明显 的 区 分 ， 以 便于 用 户 侍 
找 需要 的 信息 。 

6 ) 全 男 幅 导航 ( 冀 用 于 主 界 面 导 航 )。 

全 男 幅 导航 概念 始 于 微软 公司 于 2010 年 推出 的 Windows Phone 0S 
7.0 ( WP7 ) 操作 系统 。 该 操作 系统 没有 明显 的 导航 边界 ， 内 容 本 身 就 是 界 
面 ， 给 用 户 提供 一 种 类 似 阅 读 杂 志 的 全 新 体验 。 这 种 以 内 容 为 核心 的 导航 
能 使 用 户 快速 沉浸 在 应 用 中 ， 并 且 不 会 迷失 方 问 。 

全 男 幅 导航 展现 信息 的 连续 性 与 延展 性 较 好 ， 展 现 信息 简洁 、 清 晰 ， 
只 包含 了 必要 信息 而 没有 深层 次 的 信息 架构 ( 见 表 5-6 )。 

优点 : 简单 的 层级 框 避 ， 在 一 个 界面 中 能 完全 表现 一 块 内 容 。 

特点 : 多 个 内 容 之 间 是 并 列 关 系 ， 界 面 以 线性 的 方式 完整 地 展示 内 容 。 

适用 : 整体 性 强 、 遍 平 化 的 内 容 。 

注意 : 界面 控制 在 5 个 以 内 ， 需 要 在 界面 底部 添加 标准 界面 分 页 控 
件 ， 无 法 立即 跳 转 至 非 相 邻 界面 。 

7 ) 全 屏 导航 ( 音 用 于 主 界 面 导 航 )。 
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表 S-6 全 画幅 导航 














全 屏 导航 是 实用 工具 型 与 沉浸 式 应 用 常用 的 导航 形式 ， 其 界面 需要 展 
现 的 信息 较为 局 平 ， 与 全 画幅 导航 类 似 ， 只 包含 了 必要 信息 而 没有 深层 次 
的 信息 架构 ( 见 表 5-7 )。 通 常情 况 下 ， 一 个 实用 工具 型 应 用 只 解决 菜 一 
个 方面 的 问题 ， 如 iphone 中 的 原生 应 用 指南 针 、 天 气 预 报 、 记 事 本 等 均 通 
过 全 屏 导航 的 形式 突出 了 应 用 的 核心 功能 ， 使 用 户 能 快速 浏览 信息 或 完成 
菜 项 操作 。 
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游戏 类 应 用 : 为 了 给 用 户 增加 蝎 真实 的 游戏 情境 体验 ， 游 戏 类 应 用 一 
般 采 用 握 满 整个 屏幕 的 界面 视 帝 效果 ， 使 用 户 聚 焦 于 游戏 内 容 ， 不 受 其 他 
元 素 的 干扰 。 
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烘 体 类 应 用 : 最 第 见 的 是 视频 播放 和 电子 阅读 ， 为 了 使 用 户 更 好 地 沉 
浸 于 情节 中 ， 其 界面 导航 会 删 减 一 切 多 余 的 信息 而 只 显示 当前 内 容 ， 只 有 
当 用 户 氮 击 屏 幕 时 才 会 在 序 动 尾 上 显示 操作 控件 。 

特定 任务 类 应 用 : 前 见 的 有 录音 、 担 照 、 图 片 处 理 等 ， 界 面 导航 多 以 
突出 特定 任务 为 主 ， 在 界面 的 下 方 辅 以 任务 的 操作 按键 ， 馆 党 使 用 自 定义 
的 界面 以 配合 环境 。 

优点 : 信息 展现 简单 、 和 直观， 沉浸 感 强 。 

特点 ， 都 是 基于 当前 页 面 的 交互 ， 很 少 涉及 X、Y、2Z 轴 的 内 容 。 

适用 : 游戏 、 媒 体 、 特 定 任务 类 应 用 。 

注意 : 避免 展现 内 容 面 向 俱 到 ， 增 加 用 户 的 认 知 负担 。 

面 对 日 益 多 样 化 的 移动 应 用 ， 其 界面 导航 的 形式 还 在 不 断 扩 展 ， 新 型 
的 导航 样式 层出不穷 。 由 于 应 用 的 框 染 越 来 越 局 平 化 ， 因 此 在 一 个 页 面 内 
展现 的 导航 样式 就 会 越 来 越 多 。 例 如 ， 手 机 淘宝 的 主页 面 导航 形式 是 标签 
导航 ， 但 其 在 首 屏 的 次 级 界面 导航 就 多 达 4 种 ( 标签 导航 、 入 口 导 航 、 
侧 光 导航、 列表 导航 ) ， 如 图 5-32 所 示 。 在 一 个 页 面 内 展现 多 种 导航 形 
式 一 般 适 用 信息 量 大 ， 并 且 操 作 项 目 多 的 移动 应 用 界面 。 因 此 ， 导 航 设 计 
需要 根据 应 用 的 特点 量体裁衣 ， 切 尽 讶 目地 追求 流行 的 导航 形式 而 使 应 用 
界面 谈 失 易 用 性 ， 从 而 导致 用 户 的 大 量 流失 。 


eeeee 中 国 移 动 令 22:27 
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5-32 手机 淘宝 主页 面 
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(4 ) 移动 应 用 界面 导航 的 设计 要 点 
本 书 作者 根据 自身 的 设计 经 验 ， 总 结 出 了 移动 应 用 界面 导航 的 设计 要 点 。 
@D 要 根据 移动 应 用 与 用 户 需求 ， 建 立 清晰 、 合 理 的 界面 结构 和 布 
局 ， 在 设计 之 初 就 将 各 功能 间 的 关系 进行 梳理 ， 避 免 信 息 平 铺 ， 尽 量 减少 
园 ,…f 软件 功能 布局 重新 设计 所 带 来 的 时 间 和 人 力 成 本 。 
@ 遵守 三 次 点 击 原则 。 用 户 从 应 用 的 起 始 页 跳 转 至 任何 内 容 ， 其 点 
击 的 次 数 最 好 不 要 超过 三 次 。 通 过 适当 地 增加 同一 层 的 目录 数 ， 减 少 目录 
的 层级 数 来 消减 用 户 点 击 的 次 数 是 减少 信息 深度 最 直接 的 方式 。 
@@ 相同 类 型 的 导航 设计 要 具有 一 致 性 。 一 致 性 能 帮助 用 户 ， 特 别 是 
新 手 用 户 快速 获取 所 需 信息 。 
@ 随时 随地 提供 返回 的 按钮 。 用 户 在 移动 应 用 的 多 个 界面 之 间 进 行 
跳 转 活动 时 ， 导 航 的 设计 应 该 能 帮助 他 们 快速 地 找到 出 口 ， 并 随时 提供 返 
回 上 一 层 的 操作 引导 。 
@@ 随时 告知 用 户 所 处 的 位 置 ， 帮 助 用 户 正确 地 理解 系统 状态 。 司 
时 ， 导 航 还 应 该 提供 信息 ， 帮 助 用 户 了 解 下 一 步 操作 的 方法 。 
@ 应 尽量 采用 以 图 形 为 主 的 方式 进行 界面 布局 。 图 形 化 的 表现 方式 
能 增强 文本 的 表现 力 和 可 识别 性 。 


从 
$ 
ba 





5.2.4 ”主流 乔 能 系统 平台 设计 万 法 的 比较 分 析 


通过 人 研究 发 现 ， 目 前 智能 设备 市 场 主流 的 操作 系统 是 i0S 操作 系统 与 
Android 操作 系统 。 由 于 不 同 的 系统 平台 具有 不 同 的 操作 方式 与 界 徊 导航 
寺 点 ， 因 此 在 应 用 设计 之 前 ， 设 计 师 要 分 析 和 总 结 不 同系 统 平台 之 间 的 差 
异 ， 针 对 不 同 的 操作 系统 进行 设计 活动 。 


表 5-8 两 大 主流 操作 系统 的 特点 及 比较 


全 未 全 优 点 / 优 势 缺 点 / 缺 陷 
系统 生态 链 完 整 ， 拥 有 良好 的 商 
业 模 式 ， 遵 循 简约 的 用 户 体 验 原 系统 平台 相对 封闭 ， 平 台 的 发 展 























四 则 ， 将 娱乐 与 时 尚 集结 于 一 体 ， 第 | 带 有 局 限 性 
三 方 应 用 丰富 
oy 开放 性 的 系统 平 侣 ， 追 求 个 性 化 | ”系统 分 化 严重 ， 系 统 平谷 中 的 第 





和 多 样 化 的 平台 发 展 空间 三 方 应 用 较 少 
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i0S 系统 是 平 果 公司 于 2007 年 为 其 智能 手机 iPhone 开发 的 系统 ， 该 
系统 适用 于 iPhone、iPod Touch 及 ipad 智能 设备 ， 是 一 套 较 为 封闭 的 操 
作 系 统 。i0S 系统 拥有 强大 的 功能 和 优良 的 用 户 体验 ， 将 软件 、 硬 件 与 服 
务 有 机 地 结合 在 一 起 ， 形 成 闭环 式 的 商业 生态 系统 。 

Android 是 美国 谷歌 公司 ( Google ) 于 2007 年 开发 的 基于 Linux 平 
合 的 开源 操作 系统 。Android 系统 是 一 种 开放 性 的 操作 系统 ， 它 人 允许 任何 
硬件 或 软件 开发 商 加 入 到 Andoroid 联盟 之 中 ， 因 此 该 系统 平台 拥有 庞大 
的 手机 硬件 兼容 基础 。 正 因 如 此 ， 从 第 一 代 操 作 系 统 Android 1.5 发 展 到 
Android 5.0 版 本 仅 用 了 不 到 7 年 的 时 间 。 无论 从 开发 商 还 是 用 户 及 应 用 
的 数量 上 ，Android 操作 系统 都 具有 极 高 的 普及 率 ， 这 使 它 成 为 智能 设备 
市 场 中 最 具 竞 争 力 的 操作 系统 。 该 系统 的 优势 主要 体现 在 友好 性 、 多 样 性 
和 便捷 性 ， 而 其 局 限 性 则 表现 为 市 场 上 基于 Android 操作 系统 的 分 化 现象 
比较 严重 ， 系 统 平 合 中 供用 户 选 择 的 第 三 方 应 用 较 少 。 

(1 ) 操作 方式 

i0S 系统 与 Android 系统 在 操作 方式 上 均 以 触摸 和 手势 为 主 ， 不 同 的 
是 ，Android 系统 的 菜 些 任务 要 通过 长 按 或 点 击 按钮 的 操作 来 完成 ， 而 
i0S 则 主要 依靠 屏幕 作为 用 户 与 界面 之 间 的 操作 中 介 。 这 是 因为 iphone 
的 实体 按键 比较 少 ， 常 用 的 为 “Home” 键 ， 在 执行 任务 时 ， 用 户 一 般 通 
过 它 返 回 到 梨 面 ， 因 此 设计 师 要 将 大 部 分 重要 操作 项 目 安排 于 界面 内 。 而 
Android 系统 一 般 有 三 个 物理 按键 : 返回 ( Back )、 主 页 ( Home )、 荣 单 
( Menu )， 因 此 与 之 相关 的 操作 项 目 无 须 重 复 放 置 于 屏幕 之 中 。 

当 用 户 开 启 了 多 个 应 用 后 ，i0S 系统 中 的 应 用 会 在 后 合 处 于 休眠 状 
态 ， 它 们 不 会 继续 运行 和 消耗 系统 处 理 能 力 ， 同 时 还 可 以 随时 被 唤醒 ， 但 
Android 系统 中 被 启动 的 多 个 应 用 仍然 会 在 后 人 台 继 续 运 行 ， 除 非 手 动 关 
闭 。 两 者 的 相同 之 处 是 ，i0S 和 Android 用 户 都 可 以 通过 向 上 滑动 ， 关 闭 
应 用 程序 。 

( 2 ) 界面 结构 

5 一 33 所 示 是 i0S 平 合 与 Android 平台 不 同 的 界面 结构 图 。 

i0S 平台 的 标准 界面 导航 是 项 部 状态 栏 ( 包括 显示 时 间 、 网 络 接 入 情 
况 、 电 量 等 信息 ， 当 用 户 在 进行 任务 ( 如 通话 或 录音 ) 时 ， 需 要 考虑 设计 
双 层 状态 栏 ) 和 导航 控制 器 ( 音 用 来 放置 标题 、 返 回 、 编 辑 按钮 )， 中 部 
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控件 区 ( 常见 控件 为 搜索 控件 、 标 签 控件 ) 与 内 容 区 ( 展现 页 面 中 的 主要 
内 容 ， 如 文字 、 图 片 、 列 表 等 )， 底 部 则 为 标签 栏 ( 控制 整个 应 用 的 导 
航 ， 用 于 切换 应 用 中 的 不 同 模块 ) 或 工具 栏 ( 表示 对 当前 页 面 的 操作 ， 一 
加. 任 吉 出现 在 一 令 页 面 ) 以 及 设备 硬件 “Hone” 刍 
一 < iOS Android 





导航 控制 器 
中 部 控件 区 





标签 栏 /工具 栏 





Home 返回 ”主页 ”多 任务 
5-33 105 与 Android 的 界面 结构 


Android 平台 的 标准 界面 导航 是 顶部 状态 栏 ( 包括 显示 时 间 、 网 络 接 
入 情况 、 电 量 等 信息 ) 和 工具 栏 ( 用 于 放置 应 用 的 图 标 或 标题 、 情 境 视 图 
切换 按钮 、 各 类 操作 按钮 ， 如 果 当 前 页 面 不 是 一 级 页 面 则 会 在 最 左边 出 现 
“向 上 ”按钮 )， 中 部 控件 区 ( 常见 控件 为 情境 视图 切换 控件 、 标 签 控 件 ) 
与 内 容 区 ( 展现 页 面 中 的 主要 内 容 ， 如 文字 、 图 片 、 列 表 等 )， 底 部 工具 
栏 ( 是 对 顶部 工具 栏 的 扩展 ) 以 及 三 个 物理 按键 。Android 2.3 之 前 的 系 
统 版 本 主要 依赖 设备 的 4 个 物理 按键 ( 菜单 、 主 页 、 返 回 、 搜 索 ) 操控 
整个 导航 。 从 Android 4.0 开始 ， 设 备 上 原 有 的 4 个 物理 按键 被 改 为 三 
个 ， 部 “返回 ” “主页 “多 任务 。 

( 3 ) 界面 导航 

Q) 工具 栏 。 

i0S 工具 栏 上 的 内 容 一 般 会 随 厦 当前 页 面 的 内 容 而 变化 ， 工 具 栏 上 的 
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内 容 与 当前 页 面 的 常用 功能 匹配 。 它 一 般 出 现在 屏幕 的 底部 ， 但 在 ipad 
中 有 时 也 会 出 现在 顶部 。 

Android 顶部 的 工具 栏 体现 了 整个 导航 的 结构 ， 几 乎 出 现在 应 用 的 每 

个 页 面 。 情 境 视 图 切换 是 在 4. 0 系统 之 后 出 现 的 新 功能 ， 主 要 用 来 帮助 
用 户 切换 不 同 的 内 容 。 工 具 栏 中 的 操作 按钮 用 来 放置 应 用 内 最 重要 的 功 
能 ， 如 搜索 、 分 享 、 删 除 等 )。 不 曾 用 的 功能 通 前 放置 于 更 多 菜单 内 。 

@) 标签 栏 。 

i0S 底部 标签 栏 用 于 帮助 用 户 切 换 不 同 的 功能 、 视 图 和 任务 。 在 
iPhone 中 ， 底 部 标签 栏 一 般 只 能 显示 5 个 以 内 的 标签 页 。 如 果 需 要 更 多 
的 标签 ， 则 可 以 在 一 屏 以 内 仅 显 示 4 个 标签 ， 其 他 标签 归 入 最 右边 的 “更 
多 ”标签 中 。 单 个 标签 上 最 好 展现 该 标签 的 图 标 和 和 文字， 当 用 户 选 择 其 中 
一 个 标签 时 ， 标 签 ee 要 显示 出 “被 激活 ”的 状态 ( 如 图 标 变 
亮 、 标 签 外 围 发 光 等 )， 以 方便 用 户 理解 和 操作 。 

droid 中 部 人 区 的 标 和 控件 既 能 帮助 用 户 切换 不 同 的 视图 和 功 


能 ， 又 能 用 于 浏 哆 不 同 分 2 尼 主 要 分 为 深 动 标签 、 固定 标 
人 怎 、 扒 二 标签 三 种 类 型 。 
(3) 关于 返回 。 


i0S 导航 控制 器 中 的 “返回 ”主要 指 返 回 到 上 一 个 页 面 而 不 是 上 一 个 
动作 ， 应 用 内 的 导航 与 系统 导航 完全 分 开 ,“ 返 回 ” 按 钮 一 般 放 置 于 界面 
的 左上 角 。 不 仅 如 此 ，ioS 系统 还 不 提供 退出 选项 ， 知 要 离开 当前 应 用 ， 
则 可 以 通过 智能 设备 的 “Home” 键 返 回 设备 的 主屏 幕 。 

Android 顶部 工具 栏 的 “向 上 ” 键 主 要 是 基于 应 用 内 的 层级 关系 ， 让 
用 户 回 到 应 用 中 的 上 一 步 操作 ;而 物理 按键 的 “返回 "， 则 主要 是 以 时 间 
倒叙 的 方式 让 用 户 回 到 设备 整个 操作 流程 的 上 一 个 动作 。 例 如 ， 让 用 户 器 
到 设备 主屏 幕 ， 或 者 切换 到 另外 一 个 应 用 。 

(9 天 于 通 基 方 起 

i0S 系统 通用 的 通知 方式 有 条 幅 式 通知 、 弹 出 式 通 知 、icon 角 标 式 通 
知 和 声音 通知 4 种 。 在 应 用 内 ， 背 用 的 是 弹出 式 的 通知 和 icon 角 标 式 通 
知 。 弹 出 式 通 知 一 般 将 否定 按钮 放置 在 左边 ， 肯 定性 按 铀 放置 在 石 边 。 

Android 系统 通用 的 通 en ie 进行 中 通知 、 弹 出 式 
通知 、 提 示 条 通知 4 种 。 弹 出 式 通知 与 提示 条 通知 会 在 应 用 运行 时 出 
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现 ， 进 行 中 的 通知 会 让 用 户 了 解 后 合 运 行 的 情况 。 在 应 用 内 ， 常 用 的 是 弹 
出 式 通 知 和 icon 角 标 式 通知 ， 其 显示 、 操 作 逻 辑 与 i05 系统 相同 。 

综 上 所 述 ，i0S 系统 与 Android 系统 平台 具有 不 同 的 特点 ， 因 此 在 交 
互 设计 方法 上 也 有 一 定 的 区 别 。 在 进行 移动 应 用 界面 设计 时 ， 设 计 研 发 团 
队 不 仅 需 要 了 解 应 用 所 属 系统 平台 的 特点 ， 考 虑 不 同 的 屏幕 方向 和 尺寸 ， 
还 要 熟悉 其 相应 的 设计 规范 。iS0 系统 平台 就 有 一 套 自己 的 交互 设计 规 
汇 ， 如 屏幕 中 可 点 击 元素 的 最 小 尺寸 是 44 x 44 像素 ( Retina 屏 宽 高 均 需 
要 提高 2 倍 ) 图 片 质量 的 影响 显而易见 、 用 户 最 关注 的 是 内 容 。 不仅 
如 此 ， 设 计 师 还 要 考虑 不 同 受 众 的 需求 ， 以 便 做 出 更 符合 用 户 直觉 和 习惯 
的 优良 设 放 5 


5.3 担 升 人 区 互 体验 的 要 品 与 谤 计 万 法 


5.3.1 手 后 吕 击 


在 日 前 生活 中 ， 人 们 主要 依靠 手指 操控 手机 等 移动 设备 ， 因 此 为 移动 
应 用 界面 进行 设计 ， 需 要 重点 若 虑 用 户 手 指 在 界面 中 的 操作 是 售 顺 畅 、 高 
效 、 合 理 。 例 如 ， 人 们 在 行走 的 情境 中 习惯 用 单 手 操作 ， 考 虑 到 这 一 点 ， 
屏幕 中 需要 用 户 频 繁 点 击 的 模块 就 要 设计 得 旺 目 并 离 拇指 更 近 ， 以 方便 用 
户 操作 。 通 剃 情况 下 ， 只 有 当 按 钮 有 足够 的 大 小 和 空间 时 ， 才 能 确保 它们 
能 够 容易 被 用 户 激 酒 。 

( 1) 手指 最 佳 点 击 区 域 

于 指 氮 击 区 域 设 计 涉 及 用 户 氮 击 界面 各 元 素 的 准确 率 和 触摸 感知 。 用 
户 通 前 使 用 大 拇指 与 食指 进行 操作 ， 其 中 大 拇指 的 使 用 频率 最 高 。 

以 手机 横竖 屏 操 控 为 例 ， 图 5-34 所 示 用 户 使 用 手机 时 的 手指 操作 分 
为 三 种 情况 : 

由 大 拇指 单 手 操作 。 

@) 一 只 手 握 机 器 ， 另 外 一 只 手 的 食指 操作 。 

(3) 双手 大 拇指 共同 操作 。 
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大 拇指 单 手 操作 另 外 一 只 te 双手 大 拇指 共同 操作 


-上 


5-34 手指 在 屏幕 中 的 最 住 点 击 区 域 


当 用 户 单 手持 移动 设备 并 用 单 手 操作 时 ， 习 惯 采 用 拇指 进行 操作 ; 当 
用 户 左 手持 移动 设备 时 ， 习 惯用 右手 食指 操作 ; 当 用 户 在 玩 游戏 时 则 会 更 
倾 癌 于 双手 持 移 动 设 备 ， 并 使 用 双手 的 拇指 进行 操作 。 

保罗 . 费 茨 ( Paul Fitts ) 于 1954 年 提出 了 费 茨 定律 ， 主 要 用 来 描述 
目标 区 域 尺 寸 、 距 离 和 人 类 行为 之 则 的 关系 。 他 认为 距离 越 远 ， 移 动 所 花 





时 间 越 长 ;目标 面积 越 大 ， 从 一 个 点 移动 到 玖 一 个 氮 就 越 轻 松 。 根 据 这 个 


定律 ， 将 移动 应 用 界面 中 供用 户 选择 的 目标 区 域 设 置 得 越 大 ， 用 户 就 越 能 
轻松 移动 和 扣 击 ， 并 能 减少 误 操 作 。 随 大 可 扣 击 区 域 的 变 大 ， 组 件 之 间 的 
距离 也 会 变 大 ， 界 面 也 会 显得 更 加 简洁 。 

( 2) 手指 最 佳 点 而 尺寸 

由 于 移动 设备 屏 磋 空间 的 限制 ， 手 指 扣 击 区 域 无 法 被 无 限 放 大 。 
此 ， 设 计 点 击 区 域 需 要 符合 单 人 手指 的 大 小 。 

根据 一 项 MIT te ily 
发 现 ， 用 户 食指 的 平均 宽度 为 16~20mm， 即 45~ 57 像素 ( px )， 大 拇指 
的 平均 宽度 为 25mm， 即 72 像素 ( px )。 因 此 ， ER 最 佳 的 
尽 击 尺寸 如 图 5-35 所 示 : 

屏幕 点 击 区 域 尺 十 

食指 : 屏幕 斥 击 区 域 保持 在 57 像素 ( Wb 

大 拇指 ， 屏 间 点 击 区 域 保持 在 ee } 还 有 
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手指 最 小 点 击 区 域 尺 寸 
食指 : 指 尖 最 小 点 击 区 域 为 8gmm， 指 腹 最 小 点 击 区 域 为 10mm。 
大 拇指 ， 指 尖 最 小 点 击 区 域 为 10mm， 指 腹 最 小 点 击 区 域 为 14mm。 


172px | 





5-35 ”食指 与 拇指 的 最 佳 点 击 尺 十 


在 高 清 屏 右 ( Retina ) 中 的 按钮 ， 其 大 小 应 该 在 88~ 114px 之 间 ， 这 
可 以 使 指 尖 有 足够 的 区 域 来 轻易 激活 一 个 按钮 。 

设计 师 在 设计 移动 应 用 界面 点 击 区 域 时 ， 要 避免 出 现 按 钮 过 远 、 按 钮 
过 小 和 按钮 间距 过 密 的 问题 ， 合 理 地 控制 按钮 的 大 小 ( 像素 ) 和 操作 点 之 
间 的 空间 距离 ， 使 用 户 的 点 击 体验 更 精确 、 更 有 效率 。 


5.3.2 ”输入 设计 


(1) 基于 文本 的 输入 

文本 输入 是 移动 应 用 宅 徊 中 常用 的 信息 输入 形式 ， 用 户 可 以 通过 调 出 
虚拟 键盘 输入 账 所 密码、 搜索 信息 、 发 表 言 论 等 。 一 个 良好 的 输入 环境 能 
使 用 户 与 界面 的 对 请 过 程 于 加 流畅 。 移 动 应 用 界面 的 文本 输入 框 就 是 提升 
文本 输入 体验 的 核心 模块 。 

由 注意 输入 内 容 的 提示 。 

用 户 在 进行 输入 动作 时 ， 系 统 具 有 相关 输入 内 容 的 提示 能 提高 用 户 操 
作 的 效率 ， 缩 短 用 户 思 考 的 时 间 成 本 。 例 如 ， 在 登录 界面 告知 用 户 其 用 户 
名 一 栏 既 可 以 输入 邮箱 名 称 ， 又 可 以 输入 用 户 的 昵称 ; 在 搜索 输入 框 提 示 
用 户 可 供 搜索 的 内 容 ; 在 多 行文 字 的 空白 输入 框 中 增加 引导 性 文字 ， 提 示 
用 户 可 以 输入 的 内 容 。 这 些 提示 能 帮助 用 户 快速 完成 输入 任务 ， 引 导 词 或 
短 句 容 易 使 用 户 产 生 情 感 上 的 共鸣 ， 让 用 户 的 操作 过 程 变 得 更 加 愉悦 。 
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此 外 ， 除 了 文字 输入 提示 外 ， 还 可 以 将 提示 内 容 变换 为 单个 控件 按钮 
供用 户 选 择 。 例 如 ， 在 浏览 器 应 用 的 虚拟 键盘 中 ， 默 认 提 供 “ www.” 
“.Ccom” 等 控件 按钮 ， 方 便 用 户 直 接 选 择 ， 如 图 5-36 所 示 。 


RO 


We 





























取消 

用 户 名 邮箱 或 昵称 wap.soso.com/sweb/search.jsp?st=iNp 
| 、 ; 网 易 邮箱 手机 智能 版 - 适 配 jPhone..。 “Gy 
密 码 : smart.mail.126.corm/?dv=smart 

汪 ee © 
ER 
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影院 KTV 

CT Alslol[rleln[s [x] falslolrleln[, lrle 
淘 使 用 淘宝 账号 登录 > 摇 一 摇 > 





找 美食 ， 快 速 又 好 玩 


图 5-36 4 种 不 同 的 输入 框 形式 


注意 输入 限制 的 提示 。 

输入 限制 提示 主要 用 来 提醒 用 户 文本 框 可 供 输 入 的 文字 字符 总 数 和 目 
前 可 供 输 入 的 文字 子 傈 数量， 以 避免 用 户 输入 超出 限制 。 输 入 限制 提示 一 
般 以 控件 的 形式 内 黄 于 输入 框 右 侧 。 例 如 ， 和 做 博 应 用 限制 输入 140 个 字 
伯 ， 并 将 其 以 黑色 数字 的 形式 设置 于 输入 框 的 右 下 角 ; 当 用 户 开始 输入 
时 ， 数 字 便 会 不 断 减 少 以 告 和 用 户 当 前 还 能 输入 的 数字 数量 。 人 人 应 用 则 
将 当前 可 供 输 入 字符 与 总 字符 240 同时 显示 于 输入 框 的 右 下 角 并 以 分 隔 
号 卫 开 ， 当 用 户 开始 输入 时 ， 左 侧 字 从 会 不 断 增 加 而 右 侧 240 保持 不 变 
( 见 图 5-37 )o。 输入 限制 提示 不 仅 能 直接 告知 可 供用 户 输入 的 文字 字符 ， 
还 能 减少 用 户 文 本 输入 的 出 销 机 率 ， 提 升 输入 文字 字符 的 输入 体验 。 

(83) 提供 直接 删除 ( 清空 ) 的 选择 。 

看 用 户 要 清空 当前 已 编辑 内 窑 ， 系 统 需要 提供 一 个 直接 删除 的 按钮 。 
契 系 统 仅 文 持 用 户 用 虚拟 键盘 进行 逐 字 删除 ， 则 会 六 大 提高 用 户 探 作 
的 成 本 。 

因此 ， 无 论 是 小 段子 从 还 是 长 段 文字 ， 系 统 痢 应 该 为 用 户 提 供 直 接 删 
除 全 部 内 容 的 选择 。 在 设计 中 体现 为 清空 的 控件 按钮 ， 在 小 型 输入 框 中 一 
般 显 示 于 文字 输入 的 末 站 ;而 在 文 持 文字 较 多 且 大 量 留 白 的 输入 框 中 则 一 
般 显 示 于 输入 框 的 直上 侧 ， 以 免 厌 撑 用 户 视 线 。 
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5-37 ”输入 限制 提示 





例如 : 当 用 户 登 录 界 面 时 ， 耕 用 户 输入 的 用 户 名 或 密码 销 误 ， 系 统 能 
在 输入 框 右 侧 提供 清空 的 控件 按钮 ， 方 便 用 户 重 新 输入 ;在 微 博 文字 输入 
界 向 ， 当 用 户 需 要 重新 输入 文字 时 ， 系 统 在 输入 框 的 左上 侧 提 供 清 空 的 功 
能 ， 万 便 用 户 快速 重建 内 容 。 此 外 ， 当 用 户 开始 进行 文字 输入 以 后 ， 清 空 
的 控件 才 出 现 或 被 激活 ， 避 人 免 对 用 户 造成 销 误 引导 ( 见 图 5-38 )。 












Q 你 户 


INSTAGRAM 标 符 
号 # 你 说 
& 11 


含有 关键 字 " 你 说 "的 微 博 


LW 








5-38 一 键 删 除 控件 


(2 ) 基于 选择 的 输入 

由 于 移动 应 用 使 用 环境 的 复杂 与 移动 设备 屏幕 的 限制 ， 当 用 户 面 对 操 
作 选 择 ， 而 这 种 选择 具有 一 定 沁 围 ( 如 时 间 、 另 女 、 币 种 ) 时 ， 系 统 应 该 
提供 预 设 选项 供用 户 选 择 。 
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如 果 用 户 可 以 通过 选中 其 中 一 个 项 目 完成 选择 ， 就 不 需要 调用 虚拟 键 
时 进行 手动 输入 文字 的 操作 。 

用 选择 代 蔡 文本 输入 的 交互 方式 能 降低 用 户 思 想 和 行为 操作 中 的 负 
担 ， 使 整个 操作 流程 时 加 快捷 。 例 如 ， 用 户 进 入 卡通 形象 制作 应 用 脸 明 
时 ， 可 以 直接 选择 “帅哥 ”或 者 “美女 ”来 表示 自己 的 性 别 ， 无 须 文 字 输 
入 ( 见 图 5-39 );， 用户 使 用 币 种 换算 应 用 iMoney 时 ， 可 以 上 下 拨 动 滚轮 
以 选择 需要 换算 的 货币 种 类 ， 也 无 须 文 字 输 入 ( 见 图 5-40 )。 


eeee 中 国 移动 全 18:54 @ 799% OD 


6 KD :; 
39 4497.00 
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@@ 团队 介 
图 5-39 脸 明 图 5-40 iMoney 
5.3.3 控件 设计 
控件 就 像 是 一 部 车 的 零件 ， 虽 然 与 车 身 外 形 比 起 来 毫 不 起 眼 ， 但 缺少 


任何 一 个 都 会 对 车 造成 很 大 影响 。 图 标 、 链 接 、 对 话 杠 、 进 度 条 等 都 属于 
控件 的 沁 畴 ， 控 件 内 散在 界 轴 中 的 任何 模块 ， 对 界面 交互 的 实现 起 到 重要 
作用 。 本 克 主 要 对 界面 中 起 到 引导 、 帮 助 、 辅 助 、 告 知 用 户 信息 方 血 的 控 
件 进 四 
(1 ) 引导 型 控件 

导 型 控件 又 称 为 用 户 教育 控件 ， 主 要 用 来 指导 用 户 操作 ， 将 用 户 更 
快 地 市 入 应 用 的 使 用 情境 中 。 移 动 应 用 界面 的 引导 型 控件 大 致 分 为 8 类 . 
对 话 (Dialog)、 提 示 (Tip)、 教 程 (Tour)、 视 频 演 示 (Video Demo)、 半 透明 提示 
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(Transparency)、 工 入 (Embedded)、 持 续 (Persistent)、 探 索 (Discoverable)， 
如 图 5-41 所 示 。 


me 


苹 w 
Dialog Tip Tour Demo 
Ma 410 ret 加 
DO THB 
Ms 0 
Tap +o get shorhed 

THEN THC 

Transparency Embedded Persistent Discoverable 


图 5-41 8 种 引导 型 控件 
( 资料 来 源 : Theresa Neil. 《A Look Inside Mobile Design Patterns》 ) 


1 ) 对 三 是 比较 普遍 的 引导 型 控件 ， 弟 表现 为 文字 载 入 模 态 对 请 框 的 
形式 ， 浮 现在 界面 最 前 面 。 它 主要 有 两 种 形式 :中 提 示 重要 内 容 ， 竺 用户 
反击 确定 后 方 会 消失 ;，@ 基 于 重要 操作 ， 为 用 户 提供 确定 或 取消 两 种 选 
项 ， 竺 用户 选择 后 对 话 框 才 会 消失 。 在 对 话 框 引导 控件 的 设计 中 ， 需 要 在 
保证 说 明文 字 简 洁 和 易 懂 的 基础 上 ， 使 用 户 容 易 操 作 和 选择 。 

2 ) 提示 作为 一 种 伴随 用 户 操 作 过 程 的 反馈 形式 ， 随 时 引导 用 户 进 行 
高 效 和 正确 的 操作 。 它 会 在 必要 时 以 提示 框 融 合 筷 头 的 形式 出 现在 界面 之 
中 。 例 如 ， 当 用 户 第 一 次 开局 应 用 时 ， 提 示 对 请 框 作为 新 手 引 导 的 一 种 视 
部 形式 指导 用 户 进行 操作 ; 当 用 户 在 使 用 一 项 新 功能 时 ， 提 示 对 请 框 也 能 
即时 地 告知 其 正确 的 操作 方法 。 与 对 话 框 的 形式 比较 ， 提示 对 证 框 具 有 更 
强 的 上 下 文 相关 性 。 设 计 提 示 对 话 框 时 要 注意 框 内 文字 尽量 简洁 ， 强 调 租 
头 指 向 的 唯一 性 和 清晰 性 。 

3 ) 教程 型 的 引导 控件 是 通过 连续 性 的 功能 展示 ， 全 和 面 地 告知 用 户 应 
用 界面 的 天 键 性 功能 及 其 操作 方法 。 例 如 ， 将 功能 介绍 分 为 5 个 卉 面 ， 每 
个 界面 展现 一 种 核心 功能 ， 用 户 可 以 通过 单 击 “ 下 一 页 ”按钮 或 癌 左 靖 动 
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屏幕 切换 到 下 一 个 界面 。 考 虑 到 用 户 短 时 记忆 的 限制 ， 需 要 将 教程 型 引导 
控件 的 界面 数量 控制 在 5 页 以 内 ， 并 尽量 以 文字 和 图 形 搭配 的 视觉 形式 展 
现 重 点 内 容 。 与 此 同时 ， 系 统 还 要 做 到 支持 用 户 自 定 义 关闭 或 开启 教程 引 
导 控 件 。 

4 ) 视频 演示 是 比较 直观 的 引导 方式 ， 主 要 用 来 展示 应 用 界面 的 操作 
流程 。 而 对 于 特定 或 复杂 ( 图 像 或 文字 难以 表述 清楚 ) 的 操作 方法 ， 视 频 
演示 引导 更 加 有 效 。 例 如 ， 一 款 功 能 复杂 的 绘图 应 用 可 以 通过 视频 演示 轻 
松 地 帮助 用 户 学 习 其 使 用 方法 。 在 设计 时 需要 注意 以 下 几 点 : 中 将 视频 播 
放 时 间 控 制 在 2 分 钟 以 内 ， 人 否则 穷 易 使 用 户 产生 负面 情绪 ; 包 视 频 演 示 要 
做 到 重点 突出 ，@@ 提 供用 户 控制 视频 的 功能 ， 如 关闭 、 暂 停 、 停 止 、 开 户 
等 ; 多 注意 视频 与 音频 的 整合 。 

5 ) 半 透 明 提 示 主 要 用 来 引导 新 手 用 户 ， 它 通常 出 现在 用 户 第 一 次 开 
局 应 用 的 界面 中 ， 即 新 手 引 导 界 面 。 它 以 半 透 明 的 视 竞 效果 履 盖 在 应 用 界 
面前 方 ， 并 用 文子 和 图 形 符号 结合 真实 界面 内 容 指 引用 户 操作 。 例 如 ， 在 
透明 层 用 方 框 的 形式 选 定 背景 界面 中 的 导航 并 配合 文字 和 箭头 告知 用 户 其 
意义 和 使 用 方法 。 设 计时 要 尽量 在 一 个 界面 以 内 展现 引导 内 容 ， 并 将 单 界 
面 展 示 信 息 控 制 在 5 条 以 内 。 同 时 ， 还 要 注意 信息 的 逻辑 、 排 版 和 布局 ， 
尽量 采用 流线型 的 视觉 引导 形式 。 

6 ) 其 入 引导 一 般 置 于 应 用 界面 之 中 ， 用 来 引导 用 户 自行 岁入 需要 的 
内 容 。 例 如 ， 在 编辑 图 片 或 制作 文件 的 应 用 中 ， 用 户 可 以 在 藤 入 控件 框 内 
添加 图 片 或 文字 。 在 设计 时 要 注意 将 散 入 控件 和 已 有 信息 进行 视觉 上 的 差 
异化 处 理 ， 明 确 告知 用 户 藤 入 控件 的 位 置 和 操作 方式 。 同 时 ， 系 统 还 要 支 
持 用 户 在 一 个 界面 中 车 入 多 项 文件 ， 以 保证 用 户 操 作 的 自主 性 。 

7 ) 持续 引导 是 置 于 应 用 界面 之 中 并 始终 存在 的 引导 性 控件 。 例 如 ， 
在 浏览 器 应 用 的 起 始 页 中 ， 始 终 存 在 文 持 用 户 自行 定制 网 站 的 控件 。 由 于 
持续 引导 会 一 直 存 在 ， 因 此 要 使 持续 引导 处 于 弱 提 醒 的 状态 ， 避 免 对 用 户 
造成 不 必要 的 困扰 。 

8 ) 探索 引导 是 非 模 态 的 控件 形式 ， 当 用 户 进行 某 项 特定 操作 时 便 会 
出 现 。 它 的 出 现 不 会 影响 用 户 操 作 和 界面 视觉 效果 ， 属 于 一 种 激励 型 引导 
方式 。 例 如 ， 当 用 户 往 下 拖 动 列表 时 ， 列 表 与 搜索 框 之 间 出 现 “ 下 拉 刷 
新 ”的 引导 性 文字 ， 以 告知 用 户 往 下 拖 动 界面 可 以 完成 刷新 列表 的 工作 。 
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并 不 是 每 项 功能 都 适合 使 用 探索 型 引导 ， 因 为 它 通 党 在 用 户 进行 某 项 特定 
操作 后 才 会 显现 。 目 前 ， 使 用 较 多 的 功能 为 刷新 或 加 载 界 面 内 容 。 

( 2 ) 菜单 型 控件 

有 时 候 ， 应 用 中 多 个 界面 或 界面 中 多 个 模块 不 得 不 增加 一 些 用 户 需 要 

加 并 频繁 使 用 的 功能 。 羔 单 型 控件 能 在 不 占用 多 余 空间 的 前 提 下 很 好 地 收纳 
这 些 功 能 。 

当 用 户 没有 点 击 时 ， 菜 单 型 控件 通 单 以 一 个 点 状 的 图 标 形 式 置 于 
页 和 面 左 下 角 。 当 用 户 激活 控件 后 ， 它 会 从 一 个 上 护 向 外 展开 并 提供 多 个 
功能 选项 。 

Path 是 一 款 私密 社交 应 用 ， 用 户 可 以 通过 该 平台 分 享 自己 的 照片 、 
心情 、 地 址 ， 而 好 友 也 能 浏览 这 些 信息 并 进行 轻 量 级 的 互动 。Path 的 界 
面 设计 比较 简约 时 疝 ， 单 击 左 下 角 十 字 按 钮 弹出 5 个 重要 功能 ( 照片 、 地 
理 位 置 、 媒 体 、 想 法 、 睡 眠 ) 是 Path 在 界面 设计 上 最 大 的 特色 之 一 ( 见 
5—43 )。 

手机 淘宝 是 一 款 电 子 商务 应 用 ， 由 于 其 页 面 及 内 容 的 相对 复杂 性 ， 所 
以 需要 在 详情 页 添加 一 个 菜单 型 控件 。 有 了 该 控件 ， 用 户 可 以 随时 呼出 5 
项 前 用 功能 ， 同 时 也 能 通过 “更 多 ”寻找 目 己 要 找 的 功能 。 这 梓 不 仅 志 省 
了 屏幕 空间 ， 还 使 功能 的 可 扩展 性 得 到 了 大 大 提高 ( 见 图 5-43 )。 
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(31) 告知 型 控件 
告知 型 控件 通 癌 以 一 种 提醒 者 的 角色 出 现在 界面 中 。 这 类 控件 能 即时 
传递 与 用 户 紧 密 相 天 的 信息 。 
面 对 这 类 控件 ， 用 户 既 可 以 选择 碍 看， 也 可 以 选择 忽略 或 关闭 ， 
用 户 的 自主 性 相对 较 强 。 探 件 中 的 内 容 一 般 以 形状 、 文 字 、 数 字 与 从 
号 为 主 。 
如 图 5-44 所 示 ， 当 用 户 在 新 淄 微 博 应 用 首页 下 拉 加 载 当 前 页 向 时 ， 
页 面 上 方 会 出 现 一 条 黄色 村 条 形 的 学 层 ， 主 要 为 了 告知 用 户 有 多 少 条 新 的 
微 博 ， 显 示 完 该 条 信息 后 这 条 浮 层 便 会 立即 消失 。 同 时 ， 页 面 下 方 也 经 常 
会 出 现 一 条 黄色 浮 层 ， 主 要 用 来 为 用 户 推 荐 一 些微 博 ， 该 条 浮 层 不 会 立即 
消失 ， 用 户 需 要 点 击 右边 的 关闭 符号 才能 完全 关闭 。 此 外 ， 对 于 很 唱 的 需 
求 或 者 内 容 ， 可 以 邀请 用 户 参 与 互动 ， 但 要 避免 控件 持续 出 现 而 干扰 到 用 
户 的 操作 。 
音 见 的 告知 型 控件 还 有 数字 和 扩 状 符号 两 种 形式 。 数 字 提 醒 形式 常见 
于 应 用 图 标 与 标签 栏 的 石上 角 ， 以 及 一 些 列表 左 侧 图 标的 石上 角 。 扣 状 和 从 
号 意见 于 应 用 标签 栏 和 列表 的 石上 角 。 
eeeec 中 国 移动 令 20:19 @ 9 让 100% 刷 国 eeeee 中 国 移动 令 20:19 @ 9 3 100% 画 天 
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5-44 ， 新浪 微 博 的 两 种 告知 型 控件 


在 使 用 向 信 时 ， 一 旦 朋友 圈 有 了 新 的 消息 ， 标 签 栏 中 的 “发 现 ” 石上 角 
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会 以 数字 的 形式 显示 新 消息 的 数量 。 在 页 和 面 右 上 角 ， 朋 友 头 像 上 会 出 现 一 个 
红色 的 点 ， 这 能 让 用 户 知 道 最 近 朋 友 圈 更 新 消息 的 好 友 是 谁 ( 见 图 5-45 )。 





5-45 ” 微 信 的 两 种 告知 型 控件 


数字 形式 所 告知 用 户 信 息 的 准确 性 更 高 ， 但 奢 数 字 值 太 大 ， 反 而 会 使 
用 户 感到 不 安 或 产生 负面 情绪 。 点 状 符号 比 数字 显得 更 加 轻 鳃 ， 蝎 适合 用 
来 重 知 用 户 一 些 最 新 的 、 即 时 性 的 消息 ， 信 息 的 重要 性 相对 较 弱 。 


5.3.4 动 效仿 计 


随 看 移动 应 用 的 日 益 增 多 ， 用 户 对 于 界 太 的 期 待 值 也 越 来 越 高 。 动 画 
作为 一 种 生动 且 能 直观 诠释 情感 的 艺术 形式 ， 逐 渐 被 广泛 运用 到 不 同 的 领 
域 ， 如 软件 、 电 视 、 电 影 、 媒 体 等 。 如 今 ， 将 动画 作为 一 种 视 竟 媒体 形式 
运用 在 移动 应 用 界面 中 成 为 了 一 种 趋势 。 例 如 ， 平 果 i0S 7 与 微软 的 
Windows Phone 系统 就 采用 了 多 种 动 男 的 交互 形式 。 

动 国 效果 使 界面 的 视 竞 语言 更 加 丰富 ， 界 面 层 次 更 加 清晰 ， 不 仅 能 给 
用 户 冲 来 自然 和 顺畅 的 交互 体验 ， 还 能 拉 近 用 户 与 界面 之 间 的 距离 。 动 男 
效果 是 情感 化 设计 、 用 户 体 验 创 新 、 界 面 引 导 、 友 好 反馈 的 直接 表现 形 
式 ， 了 逐渐 成 为 评判 一 款 应 用 优 劣 的 重要 条 件 之 一 。 
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(1 ) 移动 应 用 界面 采用 动 效 设计 的 意义 

(D 使 用 户 感 到 操作 更 流畅 、 更 有 效率 。 在 一 款 移 动 应 用 ， 特 别 是 实 
用 工具 型 应 用 中 ， 动 国 效 果 的 融入 能 使 视觉 界面 中 各 元 素 的 逻辑 与 层次 更 
加 清晰 。 当 元 素 间 发 生变 化 时 ， 动 男 也 能 有 效 地 传达 这 种 变动 并 辅助 用 户 
理解 。 因 此 ， 动 男 效 果 能 使 用 户 感 到 整个 操作 流程 更 流畅 也 更 具 效 率 。 

@) 使 用 户 感到 有 趣 。 通 过 生动 、 灵 活 和 情感 化 丰富 的 动画 效果 ， 能 使 用 户 
的 操作 过 程 变 得 更 加 轻松 、 愉 悦 。 在 无 形 中 提升 了 应 用 的 品牌 效应 和 吸 引力 。 

(3) 使 用 户 感到 易学 。 动 画 效果 能 有 效 地 帮助 用 户 理 解 一 个 全 新 的 功能 
或 操作 方式 。 用 户 能 通过 生动 的 动 男 演 示 ， 轻 松 地 了 人 解 和 学 习 应 用 的 功能 。 

(4) 减缓 用 户 等 待 的 时 间 。 在 需要 用 户 等 每 的 寞 面 中 插入 特别 的 动态 效果 
能 减少 用 户 的 焦虑 ， 分 散 用 户 的 注意 力 ， 使 用 户 在 等 街 过 程 中 变 得 有 事 可 做 。 

( 2 ) 移动 应 用 界面 动 效 设计 要 注意 的 内 容 

( 动画 的 表意 要 简单 和 明确 ， 尽 量 符合 用 户 的 心理 模型 。 

@) 动 男 符号 可 以 是 对 现实 事物 的 隐喻 ， 使 用 户 更 容易 理解 和 操作 。 

(3) 当 用 户 专注 于 某 项 内 容 的 创建 或 输入 动作 时 ， 要 避免 过 度 使 用 动 
国 效 果 ， 以 防止 分 散 用 户 注意 力 从 而 降低 用 户 的 执行 效率 。 

(4) 控制 动画 的 执行 时 间 长 度 ， 避 免 在 界面 中 过 度 使 用 动画 效果 从 而 
使 用 户 产 生 负 面 情绪 ， 对 于 用 户 使 用 频率 较 高 的 功能 要 蛋 用 动 国 效果 。 

(8) 动画 效果 要 考虑 不 同 移动 设备 系统 平台 的 特性 及 其 执行 效率 ， 以 
达到 最 好 的 动 男 执行 效果 。 

(0) 注意 与 听觉 体验 相 结 合 ， 避 免 孤 立地 设计 动画 的 视觉 效果 。 

动 效 设 计 可 以 运用 在 移动 应 用 界面 中 的 每 一 个 交互 时 机 ， 如 用 户 开 局 
界 贺 ， 用 户 尽 击 界 面 中 菜 个 元 素 后 锋 得 的 有 反馈， 用户 在 不 同 页 面 之 间 切 换 
能 感受 到 的 动 男 效 果 等 。 动 国 效 果 不 能 随意 滥用 ， 人 否则 会 对 用 户 和 产品 本 
刁 产 生 负 面 影 响 。 从 常见 的 动 效 载体 上 上 看， 页面 的 入 场 、 转 场 、 信 息 加 载 
是 运用 动 效 的 最 好 时 机 。 

1. 入 场 动 效 设 计 

入 场 春 面 是 用 户 点 击 应 用 界面 图 标 到 应 用 真正 被 开局 之 间 的 过 渡 界 
面 ， 它 用 来 缓解 移动 应 用 环境 以 及 移动 设备 性 能 的 某 些 限制 而 造成 月 动 时 
间 拖 延 的 问题 。 入 场 界面 的 出 现 并 不 符合 用 户 真 正 的 心理 预期 ， 它 并 不 是 
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用 户 最 想见 或 最 愿意 见 到 的 界面 ( 不 是 用 户 目标 ) ， 所 以 加 入 少量 的 动画 
效果 不 仅 能 减轻 用 户 等 竺 的 心理 负担 ， 还 能 通过 微妙 的 动 效 将 用 户 逐 渐 引 
入 到 应 用 的 情境 中 。 

Twitter 入 场 动 效 设 计 的 风格 鲜明 ， 采 用 由 远 及 近 的 动画 效果 ， 寓 意 
看 Twitter 的 这 只 小 马 正 慢 慢 飞 同 用 户 ， 从 而 将 用 户 正式 市 入 到 应 用 界面 
中 ( 见 图 5-46 ) 。 





5-46 Twitter 入 场 动 效 
Esty 入 场 动 效 设计 结合 了 应 用 的 具体 属性 ， 如 手工 艺 品 买卖 服务 平 
合 ， 将 应 用 中 所 包含 的 物品 置 于 一 个 个 方块 中 ; 一旦 用 户 开 局 应 用 ， 入 场 
界 因 下 方 的 方块 便 会 开始 折 苞 翻转， 界面 中 东 个 模块 将 会 被 放大 ， 之 后 用 
户 便 正式 进入 了 应 用 界面 ( 见 图 5-47 ) 。 
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通过 Twitter 和 Esty 的 案例 可 以 看 出 ， 动 效 设 计 完 全 可 以 结合 应 用 
的 特点 ， 将 应 用 中 的 品牌 元 素 提取 出 来 进行 动 效 设计 ( 如 Logo、 商 品 
等 ) 。 由 于 入 场 界 和 面 “过 渡 ” 的 特 操 ， 入 场 界 面 动 效 的 设计 要 避免 太 过 于 
浮夸 或 者 漫长 ， 尽 量 做 到 简洁 和 精致 。 

2. 转 场 动 效 设计 

移动 应 用 页 面 之 间 有 前 与 后 、 上 与 下 、 磊 与 右 三 种 基本 维度 的 关系 ， 
这 种 关联 使 整体 界面 更 加 具有 整体 性 和 连贯 性 。 当 用 户 从 一 个 页 和 面 切换 到 
另外 一 个 页 面 时 ， 若 在 这 个 切换 过 程 中 添加 动画 效果 ， 则 能 使 用 户 的 操作 
变 得 更 加 灵活 、 生 动 和 有 趣 ， 使 页 面 之 间 更 富有 层次 、 节 奏 和 生命 力 。 

传统 的 界面 转 场 动 效 有 回 下 拉 伟 、 平 移 、 收 缩 、 放 大 、 翻 只、 旋转 
等 。 随 看 动 效 设计 的 发 展 ， 转 场 动 效 的 表现 形式 不 再 显得 那么 机 械 化 和 程 
式 化 。 只 要 能 使 用 户 在 操作 中 感到 愉悦 甚至 惊喜 ， 就 是 值得 推 当 的 动 效 设 
二 方案 = 

City Guides by National Geographic 是 一 款 国 家 地 理 城市 导 砚 应 
用 ， 它 为 用 户 提 供 了 伦敦 、 巴 艇 、 罗 马 、 纽 约 4 个 城市 有 关 天 气 、 地 
到、 导 讽 等 多 项 服务 。 该 应 用 最 大 的 特 氮 是 它 有 用 了 空间 感 极 强 的 转 场 动 
效 设 计 ， 每 一 个 城市 就 是 一 张 卡 片 或 者 扑克 牌 ， 用 户 可 以 通过 在 界面 空间 
中 同 左 或 器 右 旋转 ， 使 多 张 或 一 张 城市 卡片 来回 切换 ( 见 图 5-48 )。 





5-48 City Guides by National Geographic 界面 转 场 动 效 设计 


续 场 动 效 是 从 细节 上 深度 丰富 用 户 的 切换 体验 ， 让 用 户 的 操作 更 加 平 
滑 和 自然 。 一 个 应 用 中 的 同类 转 场 操作 需要 使 用 一 致 的 动画 效果 ， 单 个 页 
面 不 能 使 用 超过 两 种 动画 效果 。 
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3. 信息 加 载 设 计 

与 入 场 、 转 场 动 效 相 比 ， 信 息 加 载 设计 与 用 户 “ 等 待 ” 的 动作 联系 更 
加 紧密 。 在 这 一 段 相 对 静止 的 交互 时 段 中 ， 用 户 心理 的 变化 是 细微 和 不 可 
忽略 的 ， 而 设备 及 网 络 环境 的 优 劣 又 会 直接 影响 到 信息 加 载 的 效率 ， 因 此 
设计 团队 应 该 着 重 思考 如 何 采 取 有 效 的 加 载 策略 ， 最 大 限度 地 减轻 用 户 在 
等 待 时 的 心理 负担 。 

(1 ) 满 屏 加 载 

满 屏 加 载 类 似 于 网 页 中 的 刷新 、 打 开 网 页 的 功能 。 当 系统 进行 满 屏 加 
载 时 ， 页 面 中 会 出 现 进度 条 、 符 号 旋转 、 文 字 等 各 式 各 样 的 加 载 形 式 ， 以 
告知 用 户 当前 页 面 正 在 加 载 。 加 载 逻辑 类 似 于 对 证 框 模 态 化 加 载 ， 页 面 加 
载 过 程 中 用 户 无 法 进行 除 关 闭 、 退 出 页 面 之 外 的 任何 操作 ， 仿 佛 整 个 屏幕 
被 锁定 了 一 样 ( 见 图 5-49 )。 
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5-49 多 种 满 屏 加 载 形 陈 


满 屏 加 载 是 比较 传统 的 加 载 形 式 ， 其 好 处 是 能 保证 内 容 和 体验 的 一 致 
性 ， 让 用 户 聚 焦 于 当前 页 面 ， 但 遇 到 网 络 不 佳 的 情况 则 会 增加 用 户 的 等 待 
时 间 ， 影 响 用 户 体 验 。 

因此 ， 和 若 使 用 满 屏 加 载 则 需要 在 加 载 过 程 中 增加 一 些 情感 化 的 设计 ， 
并 告知 用 户 当 前 的 进度 。 

(2 ) 下 拉 加 载 

当 用 户 使 用 社交 、 新 闻 等 类 型 的 应 用 时 ， 往 往 会 面 对 无 限 向 下 的 页 
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， 用 手指 靖 动 到 页 面 中 一 定位 置 时 便 会 产生 视觉 上 的 疫 邦 感 。 下 拉 加 载 
通过 立即 刷新 页 面 ， 为 用 户 呈 现 一 批 新 的 信息 ， 不 仅 为 用 户 增加 了 新 鲜 
感 ， 还 缓解 了 用 户 的 视 沉 疲劳 ( 见 图 5-50 )。 音 见 的 操作 方式 是 用 户 用 手 
指 主动 喇 下 拉 伸 页 面 实 现 加 载 ， 但 也 有 有 页面 疹 动 到 一 定位 置 时 系统 支持 页 
面 自动 和 辐 下 加 载 信息 的 方式 。 利 用 符号 旋转 是 剃 见 的 加 载 形 式 。 
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5-50 多 种 下 拉 加 载 形 式 


如 图 5-51 所 示 ， 口 袋 购物 的 下 拉 加 载运 用 卡通 图 示 和 风趣 性 的 文 
字 ， 加 深 了 用 户 的 参与 感 ， 从 情感 上 使 用 户 对 应 用 增加 了 好 感 。 因 此 ， 无 
论 使 用 何 种 操作 方式 和 表现 形式 ， 下 拉 加 载 都 需要 做 到 友好 、 即 时 地 为 用 
户 提供 可 阅 旋 信息 。 知 使 用 系统 自动 加 载 ， 则 要 找 准 加 载 点 ， 合 则 会 打 断 
用 户 的 阅读 路 径 ， 造 成 较 差 的 用 户 体验 。 
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图 5-51 口袋 购物 的 下 拉 加 载 设计 
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移动 应 用 中 有 一 些 页 面 图 片 较 多 ， 这 样 容 易 占用 网 络 资 源 ， 因 此 分 步 
加 载 能 帮助 移动 应 用 通过 预先 加 载 文字 等 信息 ， 使 页 面 信息 展示 具有 连贯 
性 ， 避 人 免 用 户 因 为 等 每 时 间 过 久 而 离 开 该 页 面 ( 见 图 5-52 )。 





5-52 Instagram 的 分 步 加 载 


(4 ) 同步 加 载 

同步 加 载 是 当 用 户 手 动 点 击 或 者 输入 信息 时 ， 系 统 提 供 的 与 用 户 
动作 同步 的 加 载 方式 。 这 种 加 载 方式 使 界面 显得 更 加 灵活 和 智能 ， 用 
户 得 到 的 反馈 也 是 即时 的 ， 但 网 络 不 佳 的 情况 也 会 影响 用 户 的 整体 体 
验 ( 见 图 5-53 )。 
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4. 触发 反馈 设计 

当 用 户 执 行 任务 时 ， 会 根据 界面 及 其 元 素 的 反馈 来 判断 自己 的 任务 执 
行 状 态 。 在 用 户 触发 任务 ， 界 面 给 予 反 馈 的 过 程 中 加 入 轻微 的 动画 效果 ， 
不 仅 能 为 应 用 加 分 ， 还 能 起 到 引导 和 提示 用 户 操作 的 作用 。 

(1 ) 动作 执行 的 反馈 

用 户 动作 执行 的 反馈 应 该 联系 用 户 的 生 酒 状态， 将 用 户 在 实际 生活 中 
的 动作 移植 到 界面 中 。 当 用 户 般 发 一 个 动作 时 ， 系 统 就 要 立即 给 用 户 一 个 
合理 的 反馈 ， 以 告知 用 户 该 动作 执行 的 情况 。 

如 图 5-54 所 示 ， 用 户 在 应 用 界 血 中 选中 某 商 品 并 单 击 “ 一 键 购 ” 按 
钮 ， 用 户 所 购买 的 商品 图 片 便 会 沿 痢 一 条 曲线 自然 靖 沙 到 购物 车 内 。 这 一 
动作 执行 反馈 设计 和 模拟 了 人 们 在 逛 超市 时 ， 看 到 心仪 的 商品 便 会 放 进 购物 
车 的 原理 。 应 用 界面 系统 通过 一 个 将 负 喇 放 入 购物 车 的 动 男 ， 帮 助 用 户 清 
旷 地 感知 这 个 操作 的 过 程 及 结果 。 
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图 5-54 ” 用户 动 作 执行 动画 


动作 执行 反馈 设计 需要 考虑 用 户 的 思想 、 行 为 、 习 惯 等 多 重要 素 。 重 
不 符合 用 户 杠 型， 则 容易 使 用 户 感 到 突 光 和 迷 汇 。 

( 2 ) 氮 击 状态 反馈 

“ 氮 击 ”是 用 户 在 应 用 界面 中 最 第 用 到 的 于 劳 ， 而 系统 也 一 般 会 关 
用 户 征 供 原 击 有 、。 原 击 导 、 司 而 秆 不 可 忌 击 机 大 在 尺 民 二 通过 芝兰 
反 饥 ， 用 户 能 判断 自己 的 操作 是 人 否 符合 自己 的 预期 ， 从 而 作出 下 一 步 操 
作 的 决策 。 
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界面 中 的 控件 ， 特 别 是 图 标 至 少 会 月 4 种 显示 状态 : 默认 、 选 中 、 按 
下 、 不 可 点 击 ( 见 图 5-55 ) 。 除 了 不 可 总 击 之 外 ， 从 软 认 到 选中 ， 再 从 
选中 到 按 下 之 间 不 会 是 突然 变化 的 ， 应 该 要 阔 及 微妙 的 过 渡 动 男 。 例 如 ， 
当 用 户 选 中 图 标 之 后 ， 图 标的 周围 会 发 出 细微 的 动态 光 尝 ， 图 标 中 的 文字 
色彩 也 发 生 了 变化 ; 当 用 户 按 下 图 标 时 ， 图 标 会 往 里 凹陷 片刻 ， 并 立马 中 
转 至 新 的 页面 中 。 





选中 不 可 点 击 
图 5-55 4 种 不 同 的 控件 状态 
( 资料 来 源 : www.uisdc.com ) 


D.4 | 及 计 的 验证 


5.4.1 原型 秩 出 


原型 是 措 在 菏 一 方面 和 真正 的 产品 比较 接近 ， 以 便 人 们 能 对 这 一 方面 
的 各 种 技术 方案 进行 不 断 评估 和 改进 的 一 种 接近 于 实际 产品 的 模型 。 
威廉 : 利 德 威 尔 ( William Lidwe11) “认为 制作 原型 是 设计 简单 的 半成品 模 
型 或 实体 模型 ， 并 提出 三 种 基本 的 原型 理论 ， 理论 原型 、 扔 掉 原 型 和 演进 
原型 。 理 论 原型 用 来 发 现 设 计 中 的 问题 ， 评 估 和 开发 初始 设计 意见 ， 扔 掉 
原型 用 于 探索 和 测试 设计 功能 和 和 性能， 一 旦 获得 必要 的 信息 ， 该 原型 则 立 
即 废弃 ， 演进 原型 伴随 着 初始 模型 而 进行 不 断 的 开发 、 测 试 和 改进 ， 一 般 
在 设计 规格 无 法 确定 或 不 断 变动 的 情境 下 使 用 。 软 件 开 发 通常 都 按照 以 上 
三 种 原型 理论 进行 原型 开发 。 

界 辐 原型 是 信息 架构、 流程 图 相 导 航 的 具体 表现 形式 。 设 计 师 按照 移 
动 设备 的 实际 尺寸 ， 针 对 应 用 程序 模拟 一 套 界 面 原型 。 当 原型 制作 完毕 
后 ， 设 计 师 可 以 邀请 用 户 参 与 到 产品 的 测试 活动 中 ， 而 测试 结果 能 帮助 设 


dy 
二 
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计 师 对 应 用 进行 针对 性 的 修改 。Scott Jenson“ 提 出 制作 原型 是 一 种 让 你 快 
速 失 败 ( Fail Fast ) 的 方式 ， 如 果 和 失败 的 次 数 足 够 多 ， 那 么 最 终 将 得 到 正确 
的 设计 。 设 计 界 面 原型 的 主要 目的 是 发 现 新 想法 和 检验 设计 的 可 行 性 。 

( 1 ) 低 保 真 原型 ( Low-Fidelity Prototype ) 

低 保 真 原型 是 对 应 用 简单 的 模拟 ， 它 基本 停留 在 应 用 的 外 部 特征 和 功 
能 染 构 上 ， 可 以 通过 简单 的 设计 工具 或 手绘 的 形式 迅速 制作 出 来 ， 用 于 表 
现 最 初 的 设计 概念 和 思路 ( 见 图 5-56 ) 。 





5-00 了 二 绽 原 对 
( 图 片 来 源 : 作者 拍摄 于 实际 项 目 中 ) 


低 保 真 原型 主要 用 于 发 现 潜在 设计 问题 、 团 队 之 站 的 设计 沟通 ， 因 此 
无 纳 增加 视觉 上 的 表现 ， 用 简单 的 线条 及 文字 勾 国 出 界面 的 大 体 布 局 和 关 
键 元 素 ， 将 时 间 与 金钱 成 本 降 到 最 低 。 纸 面 原型 是 最 简单 、 最 容易 操作 的 
原型 技术 。 丹 ， 罗 姆 ( Dan Roam ) “在 《和 餐巾纸 的 背面 》 一 书 中 提 到 :; 一 
张 纸 和 一 支 笔 就 能 高 效 并 快速 地 推进 产品 原型 ， 目 方便 修改 。 同 时 ， 它 也 
存在 浴 端 ， 如 不 便 人 保存、 传输 与 共享 。 

UI Stencils 是 一 套 原型 绘制 工具 ， 包 含 了 iphone、ipad、Android、 
Windows Phone、Website 五 种 UI 元 素 模板 ( 见 图 5-57 ) 。 设 计 师 可 以 和 且 
接 选 取 这 些 模 板 印 在 空白 草稿 板 上 来 绘制 原型 图 。 
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5-57 UI Stencils 工具 
( 图 片 来 源 ，www.Uistencils.com ) 


( 2 ) 高 保 真 原型 ( High-Fidel1 让 y Prototype ) 

交互 设计 阶段 的 高 保 真 原型 是 对 整体 设计 方案 的 还 原 和 描述 ， 它 
存在 的 前 提 是 前 期 元 素 都 已 确定 。 因 此 高 保 真 原 型 是 产品 开发 过 程 后 
期 的 半成品 。 

高 保 真 原型 是 高 功能 性 、 高 互动 性 的 原型 设计 ， 它 可 以 忠实 地 展示 移 
动 应 用 界面 主要 或 全 部 的 功能 和 工作 流程 ， 有 具有 完全 的 互动 性 ， 使 用 户 可 
以 像 使 用 真实 产品 一 样 完成 各 种 任务 ， 如 数据 输入 和 输出 、 荣 单 选 择 、 导 
航 浏 览 等 。 ”高 保 真 原型 能 够 实现 设计 师 、 产 品 经 理 和 程序 开发 工程 师 
三 者 间 的 快速 沟通 ,减少 不必 要 的 工作 内 耗 。 

高 保 真 原型 需要 包 舍 多 个 方面 的 内 容 : 页 面 及 页 面 之 间 详 细 的 交互 动 
作 、 流 程 与 动 效 、 单 页 面 的 导航 模式 与 细节 、 异 常 流 处 理 等 。 设 计 师 绘制 
出 较为 标准 的 界面 线 框图 后 ， 要 用 租 头 、 圆 阐 、 手 指 等 符号 辅助 说 明 其 流 
程 、 逻 辑 ， 在 必要 时 还 需 配 上 简短 的 文字 加 以 说 明 ( 见 图 5-58 )。 

高 保 真 原型 到 底 要 做 到 什么 程度 并 无 固定 答案 ， 主 要 看 企业 、 公 司 、 
团队 以 及 个 人 对 高 保 真 原型 的 定位 。 其 保 真 程度 受到 企业 要 求 、 项 目 对 
象 、 个 人 对 项 目的 熟悉 程度 、 工 作 团队 的 习惯 和 默契 程度 、 工 作 团 队 成 员 
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之 则 的 沟通 能 力 和 风格 等 因素 的 影响 。 

高 保 真 原型 的 形式 多 种 多 样 ， 如 纸 面 原型 、 应 用 环境 原型 和 实现 原型 
等 。 纸 面 原型 是 将 完整 的 设计 稳 按 照 移动 设备 的 尺寸 手绘 或 打印 在 硬 纸 板 
上 ;应 用 环境 原型 是 用 专业 软件 绘制 原型 图 ， 然 后 将 其 加 载 至 移动 设 
备 上 ， 并 在 各 种 情景 下 观察 界面 ， 将 想法 和 实际 行为 记录 下 来 ; 实现 
原型 能 产生 与 最 终 产 品 最 接近 的 体验 。 通 党 使 用 HTML5、CSS 和 
JavaScript 建立 轻 量 的 、 半 功能 性 的 静态 原型 ， 再 通过 移动 应 用 快速 开 
发 平台 PhoneGap 加 载 到 移动 设备 上 ， 但 其 内 容 和 数据 都 是 静态 和 非 
真实 的 。 
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5-58 高保 真 原型 


近年 来 出 现 了 很 多 针对 手机 、 平 板 电 脑 的 原型 设计 软件 ， 如 腾讯 用 户 
研究 与 体验 设计 中 心 ( CDC ) 开发 出 了 一 款 高 保 真 原型 制作 的 软件 一 一 
UIDesigner。 除 了 能 在 最 短 时 间 内 使 原型 效果 与 最 终 实现 效果 达到 完全 一 
致 以 外 ，UIDesigner 还 提供 项 目 管理 、 图 片 库 和 模板 库 功 能 ， 不 仅 能 帮助 设 
计 师 管理 贡 目 ， 还 能 帮助 他 们 方便 地 调用 以 前 的 设计 资源 ， 提 高 设计 效率 。 
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Moqups 是 一 款 免费 的 HTMLS 在 线 原 型 工具 ， 里 面包 含 iphone、 
iPad 及 i0S 的 各 种 相关 组 件 : 菜单 、 对 话 框 、 开 关 、 键 瘟 、 搜 索 框 等 。 
设计 师 可 以 选取 内 置 模 板 后 直接 绘制 原型 图 ， 不 仅 方 便 而 且 快 捷 ( 见 图 
5—59 )。 
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5-59 ”原型 制作 软件 Moqups 
( 资料 来 源 : www.Modqups.com ) 


除了 静态 原型 之 外 ， 制 作 动 态 高 保 真 原型 也 日 益 成 为 一 J 动 


态 高 保 真 原型 能 模拟 用 户 体验 的 实际 感 党 。 图 5-60 所 示 是 一 个 动态 原 
型 制作 网 站 ， ee 对 制作 完成 的 高 保 真 原型 图 片 导 入 页 面 ， 
并 按照 既定 流程 与 锡 辑 进行 规划 ， 如 项 目 与 项 目的 链接 、 由 面 之 加 的 
动 男 转 场 方 陈 等 


几乎 所 有 设计 工具 的 目的 都 是 为 了 提高 设计 师 的 工作 效率 ， 辅 助 设 计 
师 更 好 地 完成 设计 任务 。 随 看 软件 支持 技术 的 不 断 发 展 ， 设 计 软 件 的 更 新 
速度 也 不 断 加 快 ， 使 用 难度 、 门 权 也 越 来 越 低 。 
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5--60 ”动态 原型 
( 图 片 来 源 ， www.flinto.com ) 


Adobe 公司 预言 未 来 设计 师 的 工作 方式 将 变 得 更 加 高 效 ， 软 件 的 智能 化 
使 设计 师 不 再 需要 鼠标 和 键盘 ， 也 无 顷 输入 文字 和 代码 ， 用 手指 和 电子 笔 
就 能 将 想法 轻松 实现 ， 同 时 还 能 随意 修改 或 添加 特效 ( 见 图 5-61 )。 








5-61 Adobe 概念 视频 
( 图 片 来 源 : www.youku.com ) 


未 来 设计 师 的 工作 方式 


5.4.2 ”设计 的 评估 :可 用 性 测 式 


可 用 性 ( Usability ) 人 研究 是 衡量 产品 在 使 用 方面 所 能 满足 用 户 刁 心 需 
要 程度 的 方法 。 可 用 性 的 测 量 指 标 包 括 使 用 效率 、 容 销 性 和 有 效 性 ， 
如 图 5-62 所 示 。IS0 9241-11 国际 标准 ”将 可 用 性 定义 为 在 特点 使 用 环境 下 
为 特定 用 户 用 于 特定 用 途 时 所 具有 的 有 效 性 、 效 率 和 用 户主 观 满意 度 。 可 
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用 性 一 般 包 括 两 个 方面 ， 新 手 用 户 或 一 般 用 户 的 学 习 和 使 用 容易 程度 ， 康 
练 用 户 在 掌握 使 用 方式 后 的 使 用 容易 程度 。 





5-62 ”可 用 性 与 可 用 性 测试 指标 


可 用 性 测试 是 和 用 户 一 起 验证 设计 方案 可 用 性 的 过 程 ， 它 一 般 安排 于 
设计 周期 的 较 后 阶段 ， 即 在 产生 文档 或 完成 原型 之 后 。 可 用 性 测试 需要 在 
比较 完善 的 设计 成 品 上 进行 ， 既 可 以 使 用 低 保 真 原型 ， 又 可 以 使 用 高 保 真 
原型 。 疯 试 者 通过 测试 的 过 程 查看 用 户 的 操作 行为 和 浏览 习惯 ， 这 不 仪 能 
帮助 发 现 移动 应 用 使 用 中 的 问题 ， 还 有 助 于 设计 方案 的 细 化 和 调整 。 摩 托 
罗拉 ( Motorola ) 公司 将 可 用 性 测试 的 优点 归纳 为 两 点 : 也 避免 设计 脱离 
实际 ; 凶 使 可 用 性 问题 在 一 个 较 低 的 时 间 与 金钱 成 本 下 运作 。 

雅 各 布 ， 尼尔森 (Jakob Nielsen)” 将 可 用 性 测试 分 为 进展 式 评估 和 总 
绪 式 评 佑 。 进 展 式 评估 指 对 设计 中 的 产品 进行 测试 ， 并 且 该 测试 作为 反复 
过 程 的 一 部 分 ， 总 结 式 评估 指 对 已 经 设计 完成 的 产品 进行 测试 。 由 于 总 结 
式 评 舍 一 般 用 在 产品 完成 之 后 ， 它 并 不 能 帮助 监测 和 推进 解决 移动 应 用 的 
问题 ， 所 以 在 可 用 性 测试 阶段 一 般 不 推荐 使 用 此 方法 。 进 展 式 评估 属于 快 
速 和 定性 的 测试 ， 它 随 看 移动 应 用 的 开发 进程 进行 阶段 性 发 展 ， 能 真正 起 
到 改进 移动 应 用 可 用 性 的 作用 。 因 此 ， 企 业 一 般 选 用 进展 式 的 评估 方法 进 
行 可 用 性 测试 活动 。 

( 1 ) 测试 准备 

设计 团队 在 进行 测试 前 要 有 周密 的 计划 ， 主 要 体现 在 地 点 、 设 备 、 材 
料 、 参 与 者 和 预算 上 的 准备 。 

Q) 疯 研 地 操 ， 实验 室 、 会 议 室 或 用 户 指 定 的 地 后 。 
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@) 测试 人 员 : 测试 实验 者 (1~ 2 人 ) 、 后 台 观 察 者 ( 人 数 不 限 ) 

(3) 测试 设备 : 一 台 安 装 好 移动 应 用 的 手持 测试 设备 、 摄 像 尖 和 录音 笔 。 

(4) 测试 材料 ， 由 测试 人 员 撰 写 的 用 户 测试 任务 书 。 

(3) 测试 参与 者 : 寻找 应 用 的 目标 用 户 进行 测试 。 每 次 测试 最 好 是 以 一 
对 一 的 形式 进行 ， 一 个 典型 的 移动 应 用 测试 一 般 需 要 测试 4~6 个 用 户 。 

(6) 测试 预算 : 测试 前 后 需要 的 时 间 和 费用 、 付 给 参与 测试 者 的 报 
一 、 分 析 测 试 结果 的 时 间 以 及 讨论 应 用 修改 方案 的 时 间 等 。 

(2 ) 设计 任务 链 

具体 的 测试 任务 要 按照 移动 应 用 的 设计 来 制定 。 首 先 ， 设 定 测试 目 
标 ， 测 试 任 务 书 的 内 容 需 与 主题 相关 ， 涵 盖 设 计 的 主要 功能 点 。 测 试 者 可 
以 将 自己 视 为 用 户 ， 将 任务 的 流程 走 一 遍 ， 并 记录 操作 过 程 中 的 问题 。 其 
次 ， 将 一 个 任务 点 设计 成 使 用 户 采 用 不 同 的 方式 完成 。 最 后 ， 满 意 度 问 卷 
的 设计 ， 让 用 户 在 测试 之 后 对 应 用 界面 进行 评价 。 

( 3 ) 测试 流程 

首先 ， 将 摄像 尖 、 传 声 器 等 设备 开启 ， 再 将 手持 测试 机 递 给 用 户 并 疝 
他 们 阐述 测试 目的 ， 介 绍 测 试 流 程 。 当 用 户 提 出 疑问 或 操作 中 遇 到 问题 
时 ， 测 试 人 员 负 责 给 出 必要 的 解释 和 帮助 。 开 始 测 试 后 ， 测 试 人 员 务 必 将 
用 户 在 操作 中 的 问题 一 一 记 下 ， 问 题 包 后 反复 至 找 、 停 顿 、 思 考 的 位 置 
等 ， 在 疯 试 中 ， 疯 试 人 员 可 以 芯 励 用 户 用 有 声 思 维 的 方式 进行 操作 ， 如 计 
用 户 在 进行 每 一 步 操 作 前 预计 下 一 步 界 面 的 反 饥 ; 操作 完成 后 ， 对 操作 进 
行 即 时 反馈 。 此 外 ， 在 后 全 观察 的 测试 人 员 也 要 将 测试 的 问题 进行 记录 ， 
以 便 测 试 完 毕 后 与 前 全 测试 人 员 进 行 意见 汇总 。 

(4) 测试 评价 

当 测 试 任务 完成 后 ， 测 试 人 员 可 以 将 之 前 的 笔录 或 录像 与 用 户 分 享 ， 
并 就 关键 问题 询问 他 们 操作 的 原因 ;最 后 ， 表 邀请 用 户 填 写 满意 度 问 卷 。 
满意 度 问卷 分 为 两 个 部 分 ， 对 应 用 的 总 体 评 价 ， 各 个 任务 和 系统 的 评价 。 

(5 ) 注意 事项 

Q) 招募 的 测试 对 象 是 目标 用 户 ， 且 最 好 是 新 手 有 用户。 可 以 采用 人 物 
角色 ( Persona ) 作为 指导 。 

@ 任务 链 的 编写 可 以 参照 场景 剧本 ( Scenario ) 。 

(3) 给 用 户 萌 造 一 个 舒适 和 安静 的 测试 环境 。 


第 5 章 ”框架 与 行为 一 一 交互 设计 (1) 


: 
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由 供 测试 的 手持 设备 原型 垂直 放置 时 中 心 距 地 面 140cm， 视 距 ( 操 
作 距 离 ) 50cm 。 如 果 让 用 户 坐 在 椅子 上 对 桌面 上 水 平 放置 的 原型 进行 操 
作 ， 合 适 的 视 距 在 35cm 左右 。 

@@ 在 测试 过 程 中 避免 参与 测试 的 用 户 被 任何 事物 打搅 。 

@ 与 参与 测试 的 用 户 签署 保密 协议 。 保 证 双方 的 测试 内 容 和 过 程 ， 
包括 用 户 信息 都 得 到 完善 保密 。 

@) 在 测试 中 ， 移 动 应 用 界面 的 设计 师 也 最 好 参与 到 后 合 观察 中 。 

@ 分 析 测 试 结 果 和 产 出 改善 方案 时 ， 整 个 移动 应 用 的 项 目 组 成 员 都 
可 以 参加 ， 如 测试 人 员 、 设 计 师 、 产 品 经 理 和 程序 员 等 。 


D.D | 小结 


交互 设计 是 影响 一 个 产品 成 败 的 关键 因素 。 本 章 着 重 介绍 了 适用 于 移 
动 应 用 界面 交互 设计 的 理论 与 方法 ， 阐 明了 用 户 与 移动 应 用 界面 之 间 如 何 
进行 良好 互动 的 解决 之 道 ， 也 为 第 6 章 界 面 视 觉 设 计 的 研究 美 定 了 重要 的 
理论 基础 。 

本 章 首 先 分 析 了 用 户 与 界面 在 交互 过 程 中 的 不 同 交 互 方式 、 交 互 维度 
及 移动 交互 设计 的 基本 原则 ， 并 在 此 基础 上 探索 应 用 界面 具体 的 交互 设计 
内 容 与 方法 ， 同 时 按照 信息 架构 、 流 程 图 、 导 航 以 及 主流 智能 系统 平台 交 
互 设计 差异 的 顺序 进行 深入 研究 。 

对 于 移动 应 用 而 言 ， 清 晰 的 软件 框架 不 仅 能 提高 设计 效率 ， 还 能 帮助 
用 户 快速 理 看 页 面 中 的 信息 ， 寻 找到 关键 功能 点 ， 并 轻松 达到 自己 的 县 
标 。 流 程 图 用 以 表现 界面 中 一 个 或 多 个 任务 过 程 中 各 个 环 乞 进行 的 顺序 和 
关系 。 如 果 许 信息 染 构 与 流程 图 是 界面 交互 设计 的 基础 ， 那 么 导航 就 是 具 
体 的 表现 形式 ， 它 用 来 指引 用 户 在 正确 的 方向 使 用 应 用 。 男 外 ， 提 升 界面 
交互 体验 细节 还 需要 从 手指 点 击 、 输 入 设计 、 控 件 设计 与 动 效 设计 这 几 个 
方面 仔细 思考 ， 以 满足 用 户 对 界面 良好 体验 的 期 望 。 

最 后 ， 在 实际 设计 活动 中 ， 设 计 者 还 需 了 解 不 同 平 侣 的 特点 及 设计 规 
沁 ， 并 展开 有 人 针对 性 的 设计 ， 通 过 应 用 界面 原型 与 可 用 性 疯 试 的 方法 ， 验 
证 设计 的 可 行 性 和 易 用 性 ， 从 而 不 断 改善 设计 的 品质 。 


小 设计 大 思维 





移动 应 用 界面 的 设计 方法 与 实践 


秩序 与 细节 一 一 视 完 设计 (G6) 


界 回 视 痪 设计 全 名 为 图 形 用 户 界 而 ( Graphical User Interface ， 
GUI ) 设计 ， 由 早期 以 文本 为 主 的 命令 行 用 户 界 面 ( Command User 
Interface，CUI ) 设计 发 展 而 来 ， 指 采用 图 形 的 方式 显示 计算 机 操作 的 用 
户 界 面 。 界 和 面 视觉 设计 的 目的 是 使 人 机 操作 更 加 人 性 化 、 减 轻 用 户 的 认 知 
和 记忆 有 负担、 提升 产品 的 市 场 竞争 力 。 因 此 ， 移 动 应 用 界面 视 竞 设计 是 对 
界面 视觉 表现 层 的 设计 。 
we 
学 、 符 号 学 以 及 格式 塔 心理 学 的 宏观 引导 下 ， 通 过 一 定 的 视 帝 设计 方法 与 
A 


0.1 1 | 影响 移动 应 用 界面 倪 砚 见 匈 人世 计 的 原理 


6.1.1 ”移动 应 用 界面 视觉 设计 美学 与 效率 


移动 应 用 界面 涉及 实用 主义 美学 的 理论 ， 实 用 和 好 用 的 界面 才能 达到 所 
亩 美的 标准 。 用 户 对 应 用 界面 美的 体验 是 全 方位 和 多 维 的 ， 正 如 约 勒 ， 杜威 
将 审美 经 验 视 作 一 种 整体 性 、 完 整 性 和 丰富 性 的 体验 过 程 。 视 党 、 昕 党、 解 
元 、 唱 郊 等 感 书 因素 都 是 影响 界面 审美 体验 的 重要 因素 。 移 动 应 用 的 界面 设 
计 美 学 就 是 设计 人 与 界面 的 关系 ， 其 中 的 美 包含 人 与 界面 的 无 障碍 沟通 、 
户 经验 与 界面 及 其 环境 的 协调 、 恨 好 的 认 知 及 情感 化 体验 。 


kK 2 
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效率 即 “ 容 易 使 用 ”， 用 户 在 理解 界面 从 号 及 流程 的 基础 上 正确 实现 
预期 功能 与 所 投入 资源 ( 时 间 、 精 力 等 ) 的 比例 ， 包 括 如 何 对 单个 从 号 上 
整个 操作 系统 的 认 知 ， 以 及 查找 、 快 速 实现 特定 的 功能 操作 。” 这 与 移 
动 应 用 界 血 设计 美学 所 强调 的 围绕 用 户 与 设计 事物 的 关系 ， 从 实用 、 认 若 
和 审美 三 个 层次 从 事 设 计 活 动 才 能 得 出 真正 符合 美感 的 设计 成 果 的 观 氮 是 
高 度 吻 合 的 。 其 中 ， 实 用 是 强调 产品 使 用 价值 与 用 户 的 使 用 需求 之 间 的 高 
度 吻 合 ， 认 知 是 对 产品 类 别 、 使 用 方法 和 社会 意义 的 传达 ， 审 美 则 具有 唤 
起 用 户 情感 体验 和 自我 认同 的 作用 ( 见 图 6-1 )。 






审美 
情感 与 目 我 认同 







应 用 认 知 
使 用 价值 和 使 用 方法 





移动 应 用 界面 
视觉 设计 美学 


图 6-1 移动 应 用 界面 视觉 设计 美学 与 效率 关系 图 

设计 师 工 作 的 核心 是 在 遵循 移动 应 用 界面 设计 美学 原理 的 基础 上 ， 以 
效率 为 先 ， 将 信息 解码 ， 重 新 编码 后 再 传递 给 客户 与 目标 人 群 。” 因 此， 
设计 师 需 设计 令 用 户 感到 贴心 的 视 竞 界面， 使 视 兑 效果 不 仅 能 符合 用 户 的 
心理 模型 还 能 体现 一 种 人 性 化 的 关怀 ， 以 提升 用 户 的 认 知 效率 或 强化 视觉 
界面 的 吸引 力 ; 同时 ， 设 计 令 用 户 感到 有 趣 和 新 告 的 界面 视觉 效果 ， 使 其 
种 给 用 户 一 种 耳目 一 新 的 感官 体验 ， 以 提升 信息 的 传播 效率 。 


6.1.2 ”基于 效率 的 移动 应 用 界面 饮 客 设计 下 子 友 展 


为 了 更 好 地 理解 移动 应 用 界面 视觉 设计 美学 与 效率 之 间 的 天 系 ， 本 和 





分 析 了 其 发 展 历程 及 特 操 ， 从 而 推断 出 基于 效率 的 设计 美学 发 展 ( 见 
6=2 
小 设计 大 思维 一 一 移动 应 用 界面 的 设计 万 法 与 实践 


拟 物 化 一 iBooks 图 形 界面 


和 定夺 化 的 色 块 突出 的 文字 信息 人 条 诺 SETTETETCTTEETEE 
强调 隐喻 + 追求 真实 质感 (简洁 + 专注 + 清晰 + 兼容 ) 高 度 演 染 + 柔 光 效果 图。 触摸 反馈 涟 淋 的 动 效 .… 
2007 中 2013 2014 

6-2 移动 应 用 界面 设计 美学 发 展 历 程 及 特点 分 析 


(1 ) 拟 物化 的 设计 美学 

拟 物 化 设计 美学 的 特 挟 是 模拟 真实 物体 的 材质 、 质 感 、 细 市 、 放 腕 
等 。 它 将 过 去 事物 中 的 一 些 特性 加 入 到 设计 中 ， 即 使 这 些 特性 并 不 具有 任 
何 功 能 性 的 需求 。 例 如 ， 市 有 老式 纸张 质感 的 日 历 应 用 ，ipBook 中 的 木质 
书架 ， 甚 至 翻 书 、 照 相 的 音效 都 属于 这 个 范畴 。 

早 在 1984 年 的 Mac 计算 机 就 已 经 有 了 拟 物化 设计 的 纵 形 ， 其 中 计算 
器 、 磁 盘 、 垃 圾 箱 几 个 主 功能 的 图 标 已 经 通过 简单 的 拟 物 国 面 表现 出 来 
了 。 最 初 ， 图 形 界面 系统 的 目的 是 为 了 让 用 户 更 好 地 理解 和 熟悉 软件 的 功 
能 ， 即 提高 用 户 的 认 知 效率 。 从 2007 年 开始 ， 苹 果 公 司 在 其 Mac 0S X 和 
i0S 系统 以 及 以 iPhone 等 移动 设备 的 UI 中 大 量 运用 拟 物化 设计 ， 这 些 具 
有 高 质感 材质 的 视觉 界面 因 其 更 加 贴近 日 党 生活、 学 习 成 本 低 并 传达 了 让 
富 的 情感 信息 ， 深 受用 户 的 喜爱 ， 使 拟 物 化 设计 美学 在 移动 应 用 界面 的 视 
觉 表 现 上 成 为 主流 。”“ 拟 物化 图 标 设计 如 图 6-3 所 示 。 





6-3 ” 拟 物 化 图 标 设 计 
( 图 片 来 源 : www.zcool1.com.cn ) 
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拟 物 化 设计 美学 的 优势 也 是 其 劣势 ， 当 拟 物 发 展 到 极致 的 时 候 ， 它 有 可 
能 变 成 另 一 个 欧洲 巴洛克 风格 和 中 国 汉代 鸟 虫 书 ， 且 有 浮夸 、 复 杂 和 奢华 包 
# 点 ， 其 对 质感 的 过 分 追求 会 降低 视觉 界面 对 信息 传达 的 效率 。 此 外 ， 拟 物 
化 越 接近 真实 ， 它 的 局 限 性 越 大 。 因 为 ， 有 时 候 应 用 的 工作 方式 与 现实 物品 
的 功能 拟 物化 并 不 相配 ， 这 会 直接 影响 产品 的 用 户 体验 和 使 用 效率 。 

(2 ) 扁平 化 的 设计 美学 


由 于 人 们 开始 对 拟 物 化 设计 美学 产生 。 所 斌 
审美 疲劳 ， 同 时 也 是 为 了 能 更 好 地 与 苹果 
形成 差异 ， 以 微软 Metro UI 为 代表 的 扁平 () My Videos 
化 设计 美学 应 运 而 生 。 它 的 特征 是 没有 阴 Wo 


影 、 高 光 、 渐 变 和 纹理 的 修饰 ， 取 而 代 之 的 “I 
是 平面 化 的 色 块 与 突出 的 文字 信息 ， 是 一 种 
极 简 的 设计 思路 。 其 中 ，2013 年 苹果 i0S 7 OO Likes 
的 问世 将 扁平 化 设计 美学 推 向 了 高 潮 。 

一 些 人 认为 局 平 化 设计 美学 来 产 于 现 
代 主 义 设计 运动 的 瑞士 国际 主义 平面 设计 图 6_4 扁平 化 界面 设计 __vined 
风格 ， 因 为 它们 都 强调 版 面 的 工整 和 画面 
的 精简 。 其 实 ， 局 平 化 设计 美学 很 早 就 在 网 页 设计 中 有 所 体现 ， 是 微软 的 
移动 应 用 让 其 受到 了 大 家 的 关注 。 

通过 分 析 媒 体 、 设 计 师 和 用 户 对 扁平 化 设计 美学 的 评价 ， 总 结 得 出 了 
其 受 青睐 的 原因 : 

() 简洁 

随 着 移动 应 用 向 小 而 美 微 应 用 方向 的 发 展 ， 高 度 专 业 化 的 服务 类 移动 
应 用 需要 简洁 的 局 平 化 设计 美学 满足 其 界面 诉求 。 

G@) 专注 

扁平 化 设计 不 单纯 是 视觉 上 的 局 平 化 ， 也 是 内 容 信 息 架 构 的 局 平 化 。 
局 平 化 设计 将 低层 信息 上 移 ， 减 少 或 取消 中 间 层 的 类 目标 签 ， 因 此 其 组 织 
结构 呈现 “ 宽 而 扁 ” 的 灌木 状 。” 通 过 扁平 化 设计 美学 让 界面 更 专注 于 对 
内 容 信 息 的 表达 ， 使 用 户 能 够 更 快 地 找到 目标 信息 。 

@) 清晰 

为 了 使 用 户 不 受 大 量 见 余 信 息 的 干扰 ， 突 出 重点 ， 避 人 免 界 面 出 现 信 息 


小 设计 大 思维 





移动 应 用 界面 的 设计 亡 法 与 实践 


呈现 超 负 行 现象 ， 需 要 运用 扁平 化 设计 美学 删除 用 户 界 向 繁杂 的 信息 。 辣 
时 ， 随 着 屏幕 尺寸 和 像素 密度 不 断 增 加 ， 局 平 化 设计 美学 所 强调 的 精细 化 
排版 布局 和 字体 也 能 呈现 最 佳 的 清晰 度 。 

由 兼容 

由 于 移动 设备 硬件 扩 术 的 不 断 发 展 ， 越 来 越 多 不 同 的 尺寸 界面 出 现在 
移动 设备 上 ， 因 此 移动 界面 需要 具备 更 灵活 的 适 配 性 ， 而 局 平 化 视 竞 界 和 面 
比拟 物化 视觉 界面 更 轻 更 简洁 ， 更 容易 被 设计 师 处 理 和 调整 ， 也 能 降低 页 
面 重量 和 缩短 加 载 时 间 。 

局 平 化 设计 也 有 其 局 限 性 ， 要 避免 局 平 化 设计 美学 被 设计 师 滥用 。 如 
果 局 平 化 设计 不 当 ， 则 会 降低 应 用 的 可 用 性 。 特 别 是 局 平 化 界面 的 细 万 需 
要 着 重 设计 ， 如 按钮 上 市 有 轻微 渐变 的 圆 角 设计 、 表 单 部 分 浅 浅 的 阴影 交 
果 、 导 航 栏 轻微 悬浮 的 效果 。 ”如 果 忽 略 这 些 细节 ， 界 面 中 的 每 个 元 素 都 
将 被 置 于 同一 水 平面 ， 用 户 在 使 用 时 将 不 可 避免 地 产生 疑惑 。 

( 3) 低 面 建 模 风格 的 设计 美学 

低 面 建 模 风 格 ( 见 图 6-5 ) 是 在 局 平 化 设计 美学 基础 上 发 展 起 来 的 抽 
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6-5 低 面 建 模 界面 设计 
( 图 片 来 源 : www.ui.cn ) 
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象 美学 ， 也 是 最 近 非 常 流行 的 一 种 视觉 设计 美学 。 这 种 设计 美学 的 特点 是 
模型 面 数 不 高 ， 面 与 面 之 间 边 绿 比 较 锐 利 ， 容 易 形 成 一 种 简洁 、 抽 和 象 、 冷 
硬 的 视觉 形象 ， 再 配 以 精致 的 高 度 泻 染 和 和 柔 光 效果 ， 低 面 模型 的 材质 和 肌 
理 效 果 能 够 被 高 度 还 局 。 其 抽象 冷 硬 的 外 形 和 细腻 的 和 演 染 效果 相 结 合 证 显 
复古 未 来 派 的 特 挟 。 此 外 ， 这 种 设计 风格 在 早期 计算 机 建 模 和 游戏 场景 设 
计 中 就 已 被 广泛 及 用 。 

( 4 ) Material Design 设计 美学 

谷歌 在 Google LO 2014 开发 者 大 会 上 推出 了 一 种 新 的 设计 语言 
Material Design ( 见 图 6-6 )。 它 的 目的 是 在 谷歌 所 有 产品 上 实现 统一 的 
连贯 性 的 用 户 体验 ， 让 产品 的 体验 设计 更 加 规 泄 。 
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6-6 Material Design 
( 图 片 来 源 : www.tech2ipo.com ) 


Material Design 设计 美学 的 特点 是 使 界面 交互 效果 更 加 贴近 现实 生 
活 中 的 场景 ， 它 的 设计 元 素 和 动 效 模拟 纸张 和 轰 水 的 质感 ， 也 具有 局 平 化 
的 特色 。 它 的 色彩 一 般 包 括 一 个 主 色 和 一 个 强调 色 ， 使 用 大 色 块 ,色彩 大 
胆 但 不 影响 内 容 的 表达 。 在 版 式 方面 ，Material Design 设计 美学 采用 网 
格 规范 版 式 ， 每 个 网 格 都 可 以 根据 移动 设备 的 适 配 情况 有 不 同 的 宽 高 比 。 
界面 中 还 大 量 采 用 圆 形 和 三 角形 的 图 案 ， 并 通过 投影 表现 界面 内 容 与 功能 
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的 层级 关系 。 男 外 ， 它 非常 重视 动 效 ， 通 过 吸收 水 墨 浸染 纸张 过 程 的 灵 
感 ， 采 用 触 挤 反馈 涟 洲 的 方式 给 用 户 市 来 非凡 的 体验 ， 将 页 面 元 泰 之 间 、 
页 面 之 间 连 接 起 来 以 表现 不 同 屏 蔽 间 的 过 渡 。Material Design 设计 美学 
的 动态 效果 和 阴影 、 颜 色 、 版 式 共 同 作 用 于 界面 ， 使 用 户 更 容易 理解 整个 
寞 面 的 信息 染 构 ， 在 保证 统一 界面 体验 的 前 提 下 ， 实 现 了 谷歌 所 有 产品 界 
面 的 自 适 配 任务 。 不 过 ， 它 还 处 于 发 展 的 初级 阶段 ， 动 效 的 表现 还 未 完全 
成 熟 ， 但 是 其 统一 的 跨 产 品 设计 美学 的 理念 有 利于 用 户 对 合 歌 品牌 认 知 效 
率 的 提升 。 

结合 上 述 对 移动 应 用 界面 视觉 设计 美学 发 展 的 分 析 可 以 得 出 ， 无 论 是 
盛 极 一 时 的 拟 物化 设计 、 当 下 流行 的 局 平 化 设计 、 腊 盏 突起 的 低 面 建 模 风 
格 ， 还 是 谷歌 新 发 布 的 Material Design 设计 美学 都 存在 自身 的 优 缺 点 。 
但 它们 都 属于 时 代 育 景 下 的 产物 ， 每 一 个 关联 的 设计 美学 之 间 都 有 一 些 相 
同 的 因子 ， 且 都 与 当时 的 科技 发 展 和 和 大众 审 美 水 平 有 直接 的 关系 。 此 外 ， 
不 可 合 认 的 是 拟 物化 对 隐喻 的 极致 运用 ， 局 平 化 对 简洁 、 专 注 、 清 晰 和 兼 
容 目 标的 追求 以 及 在 扁平 化 基础 上 增加 了 复古 情感 因素 的 低 面 建 模 风格 ， 
Material Design 设计 美学 强调 对 人 与 现实 世界 交互 效果 的 模仿 和 思考 与 
统一 连贯 的 设计 原则 都 是 对 效率 追求 的 不 同形 式 。 这 种 对 效率 的 追求 ， 一 
方面 ， 是 为 了 使 用 户 能 够 不 费力 地 和 直接 感知 ， 不 需要 努力 轧 考 而 理解 通过 
视 涡 界面 所 表达 的 信息 含义 ， 从 而 达到 减少 用 户 学 习 时 间 、 出 镍 率 和 提高 
使 用 满意 程度 的 目的 。“ 另 一 方面 ， 是 为 了 减少 设计 师 在 面 对 日 益 增多 的 
不 同 矿 寸 屏 者 下 和 不 同 产品 线 下 对 视觉 界面 进行 设计 调整 的 压力 ， 避 免 过 
多 旦 无 意义 的 智力 投入 。 同 时 ， 也 减少 过 于 华丽 的 视 吕 界面 对 人 硬件 设备 文 
持 需 求 的 压力 ， 从 而 增强 视觉 界面 对 跨 产 品 的 自 适 配 能 力 。” 效 率 关 系 
图 ， 如 图 6-7 所 示 。 因 此 ， 可 以 认为 每 一 种 移动 应 用 寞 面 视 帝 设 计 美 学 
都 是 界面 视觉 设计 时 的 可 选项 ， 关 键 需要 设计 师 从 用 户 的 使 用 效率 和 移动 
系统 与 产品 功能 的 角度 去 考虑 ， 选 择 合 适 的 设计 和 美学， 以 合理 的 视 党 形式 
加 以 表达 。 

随 看 科技 的 迅猛 发 展 ， 未 来 移动 寞 而 的 视 贺 设计 美学 法 则 也 会 随 之 发 
生变 化 。 然 而 以 效率 为 中 心 的 界面 视觉 设计 美学 理念 应 该 得 到 坚持 ， 正 如 
Kelly Johnson 提出 的 KISS 原则 ( Keep It Simple and Stupid ) ,其 
原理 指导 着 界面 设计 师 以 设计 简单 高 效 的 移动 视觉 界面 为 目标 开展 设计 实 
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践 。 因 此 ， 设 计 者 需 平 衡 用 户 需 求 与 美学 标准 等 各 种 因素 ,深入 分 析 用 户 
的 使 用 行为 与 消费 心理 ， 通 过 围 经 移动 系统 与 产品 的 核心 任务 ， 在 满足 其 
视觉 方 和 面 的 美学 需求 的 同时 ， 更 要 保证 其 使 用 的 效能 与 效率 。 


拟 物化 设计 美学 ”局 平 化 设计 美学 。 低 面 建 模 风格 设计 美学 。 Material Design 设计 美学 


a 效率 关系 


ee 信息 传播 效率 ”设计 迭代 效率 ” 自 适 配 效 率 ee 
效率 关系 





和 设计 师 Ss 
6-7 效率 关系 图 





6.1.3 ”和 付 号 的 应 用 


(19 有 有 号 

0 人 类 精神 文化 中 一 切 能 以 具体 形象 表达 
思想 、 概 念 和 意义 的 客观 存在 都 是 符号 。 ee 
托 . 获 柯 ( Umberto Eco ) 提 到 人 是 符号 的 动物 ， 疫 有 符号 就 没有 人 类 
符号 是 指示 和 指示 物 的 一 种 象征 ， 是 具体 对 象 与 其 解释 的 一 种 媒介 ， a 
们 的 知觉 或 感觉 的 层面 。 ”对 象 指 符号 所 表征 或 代表 的 具体 对 象 ， 涉 及 人 们 
pe 解释 指 人 们 对 符号 的 理解 或 说 明 ， 涉 及 人 的 思考 活动 。 因 此 ， 媒 

、 对 象 与 解释 构成 了 符号 的 基本 要 素 ， 也 反映 了 人 类 的 思维 过 程 。 

有 全 

符号 学 ( Semiotics ) 一 词 来 自古 希腊 语 中 的 Semiotikos。 符 号 学 是 
研究 符号 系统 的 学 问 。 自 19 世纪 以 来 ， 符 J 
从 20 世纪 开始 ， 结 构 主 义 语言 学 、 逻 辑 学 、 文 化 哲学 和 美学 构成 了 现代 


们 于 年 
美国 哲学 家 查尔斯 :又 德 斯 :皮尔 士 ( Charles Sanders Peirce ) “根据 符 
号 划分 为 标识 符号 ( Index ) 、 象 征 符 号 ( Symbol ) 


和 图 像 符 号 ( Icon ) 。 瑞 士 语 言 学 家 弗 迪 南 : 德 pp ( Ferdinand de 
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Saussure ) “从 语言 学 的 角度 提出 构建 独立 符号 学 的 思想 ， 他 将 语言 视 作 
最 重要 的 符号 ， 并 将 符号 分 解 为 能 指 (Signifier) 和 所 指 ( Signified ) 两 个 方 
面 。 美 国 哲 学 家 查理 斯 :威廉 - 莫 里 斯 ( Charles William Morris ) ( 1938 ) 从 逻 
各 字 和 和 证 沪 守 的 研究 出 必 s 可 出 何 写 学 准 王 个 让 驻守 科 ; 请 用 字 
( Pragmatics ) 、 语 意 学 ( Semantics ) 和 语 构 学 ( Syntactics ) 。 德 国 哲学 家 
恩 斯 特 : 卡 西 尔 ( Ernst Cassirer ) ”从 文化 哲学 的 角度 提出 信号 从 属于 物理 
世界 ， 而 符号 则 从 属于 人 的 意义 世界 。 美 国 哲 学 家 共 珊 长 。 明 格 ( Susanne K. 
Langer ) “将 艺术 视 为 表现 人 类 情感 的 符号 形式 。 

综 上 所 述 ， 在 符号 学 发 展 的 200 多 年 以 来 ， 符 号 学 理论 为 人 类 语言 
学、 区 字 < 大 关 学 心理 学 、 术 科 以 计 等 钢 域 有 榴 应 用 提供 了 一 
种 理论 原理 。 

( 3 ) 符号 在 图 形 界 面 设 计 中 的 应 用 

随 厦 视 觉 、 影 像 、 电 视 等 多 种 媒体 形式 的 发 展 ， 当 代 符 号 学 研究 已 从 
过 去 人 研究 单一 的 语言 从 号 逐步 转 为 研究 多 元 化 的 视 免 图像 从 号 。 视 像 化 虽 
不 能 取代 语言 性 的 话语 ， 但 是 可 以 使 之 更 易 理 解 、 更 便捷 ， 也 更 有 效 。 ”图 
形 、 色 彩 、 动 田 和 文字 都 属于 图 形 用 户 界 面 中 的 符号 ， 而 图 形 语言 作为 表 
象 符号 在 界面 的 视觉 传播 中 被 应 用 得 更 加 广泛 。 这 是 由 于 图 形 符号 比 其 他 
号 具有 实用 传播 效率 更 高 、 审 美 特征 更 明显 的 优势 。 通 过 研究 符号 
、 符 号 与 用 户 关系 、 符 号 与 功能 的 关系 、 编 码 者 与 解码 者 之 间 共 同 经验 

集 


t+ 闻 懂 


范围 交集 形成 的 共同 认 知 ， 才 能 构建 出 意义 完整 和 有 效 的 符号 。 

符号 可 以 分 为 基于 形式 相似 的 能 指 ( Signifier ) 与 基于 意义 相似 的 所 指 
( Signified ) 两 种 类 型 ( 见 图 6-8 )。 能 指 是 能 被 人 直接 感知 的 符号 形式 ， 如 
声音 、 文 字 、 颜 色 、 和 气味 、 触 感 等 ; 所 指 是 符号 所 指称 的 概念 内 涵 ， 如 十 字 
架 代 表 耶 稣 。 能 指 是 符号 可 感知 的 物质 形态 ， 所 指 是 符号 所 承载 的 信息 或 意 
义 。 能 指 与 所 指 通 过 符号 的 指 代 过 程 联系 起 来 ， 使 符号 具有 承载 意义 。 


| 能 指 (符号 表现 ) | 所 指 ( 符 号 内 容 ) 
> 


能 被 直接 感知 的 符号 形式 符号 所 承载 的 信息 或 意义 
6-8 能 指 与 所 指 的 意 指 内 容 与 作用 


图 像 待 号、 标识 符 号 和 象征 符号 是 图 形 界 面 设计 中 最 主要 的 三 种 符 
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岩 
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汗 
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站 
和 四 
DT 
了 
[性 
问 
br 
过 
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号 ， 它 们 能 在 满足 用 户 认 若 的 同时 更 适合 


是 界 徊 信息 传播 的 主要 符号 关 型 ( 见 图 6-9 ) 。 
图 像 符号 本 标识 符号 象征 符号 
媒介 与 指 涉 对 象 间 有 相似 性 。 媒介 与 指 涉 对 象 间 有 直接 联系 ”媒介 与 指 涉 对 象 间 无 直接 联系 : 


ETEETETETETETTE 


6-9 图像 符号 、 标 识 从 号 与 象征 签 号 中 媒介 与 指 水 对 象 的 关系 


QQ) 图 像 符号 ( Icon )。 

图 像 符号 是 通过 形象 相似 的 模仿 ， 借 用 原 已 具有 意义 的 事物 来 表达 意 
义 ， 具 有 明显 的 可 感知 特性 。 例 如 ， 在 Windows 操作 系统 中 ， 采 用 垃圾 桶 
表示 回收 站 ， 文 件 袋 表示 文件 夹 等 。 图 像 符号 将 现实 世界 中 的 对 象 以 视觉 
图 像 化 的 符号 形式 进行 再 现 ， 使 用 户 即 刻 产 生 联 想 并 引起 共鸣 ， 如 i09 系 
统 中 的 拟 物 化 设计 。 

@ 标识 符号 ( Index )。 

标识 符号 是 利用 符号 与 所 要 表征 对 象 间 存 在 的 因果 或 逻辑 性 联系 来 表 
达意 义 。 例 如 ， 网 页 浏览 的 视觉 符号 参照 日 常生 活 中 建筑 与 公共 导 视 系统 
的 设计 ， 小 房子 代表 主页 ， 前 进 用 向 右 稍 头 表示 ， 后 退 用 向 左 箭头 表示 ， 
当 后 退 到 最 后 一 步 时 就 回 到 了 主页 。 界 面 中 前 用 的 “刷新 ”图 标 是 由 国际 
环保 组 织 中 的 “循环 利用 回收 ”这 一 标识 简化 而 来 的 。 此 外 ， 导 航 、 菜 
单 、 搜 索 等 交互 控件 的 链接 三 尽 都 属于 标识 符号 的 沁 畴 。 

(3) 象征 符号 ( Symbol )。 

象征 符号 是 图 形 符 号 中 抽象 的 表意 符号 ， 与 表征 对 象 在 性 质 、 文 化 与 
传统 上 有 密切 关联 。 象 征 符号 是 由 人 们 或 社会 的 整体 文化 系统 建立 起 来 
的 ， 如 例子 代表 和 平 、 红 色 代 表 激 情 等 。 象 征 符号 通过 人 们 在 心理 层面 的 
约定 ， 将 意义 传达 给 用 户 ， 在 图 形 用 户 界面 中 也 不 例外 。 例 如 ， 在 网 页 论 
坛 和 聊天 工具 的 表情 中 ， 往 上 竖 起 的 大 拇指 表示 支持 ， 往 下 表示 反对 ; 早 
期 微软 XP 操作 系统 采用 托 手 符号 表示 共享 。 此 外 ， 设 计 师 需要 考虑 不 同 
国家 、 民 族 、 宗 教 群体 的 不 同 象征 符号 ， 以 及 同一 象征 符号 在 它们 中 的 不 
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同意 义 ， 以 便 达 到 理想 中 的 表意 效果 。 
将 图 像 符 号 运用 在 移动 应 用 的 视觉 界面 中 ， 不 能 完全 以 形式 表达 为 目 
的 ， 应 该 赋 子 这 种 物化 形式 一 定 的 “ 售 义 ”。 为 了 让 用 户 更 好 地 理解 图 像 
性 符号 的 隐喻 含义 ， 从 自然 界 及 人 文 历史 中 可 以 寻找 灵感 ， 将 人 们 习惯 意 
识 中 的 图 像 性 符号 通过 抽象 、 变 形 、 重 组 、 简 化 及 提炼 加 工 等 环节 ， 赋 予 
其 具有 了 明显 隐喻 特征 的 新 样式 。 隐 喻 党 单 被 用 于 图 形 界 面 设 计 中 ， 在 象征 . 口 
性 符号 和 图 像 性 符号 中 应 用 最 为 广泛 。 它 需要 符合 用 户 的 习惯 经 验 , 这 有 -人 
利于 图 形 界 面 信息 的 传达 。 反 之 ， 当 隐喻 不 能 准确 地 表达 信息 时 ， 设 计 师 
需要 学 会 取舍 ， 合 理 地 运用 隐喻 修辞 ， 排 除 信息 表达 不 当 的 情况 。 
三 种 符号 在 界面 视觉 设计 中 的 运用 ， 见 表 6-1。 





表 6-1 三 种 符号 在 界面 视觉 设计 中 的 运用 


媒介 (能 指 ) 指 涉 对 象 (所 指 ) 


现实 生活 中 的 书架 苹果 iBooks 书架 视觉 界面 


人 A\ 习 而 | 可 了 
铺路 | 寺 / 
EI BE 
/i 
A 


国际 环保 组 织 “ 循 环 利用 回 视觉 界面 中 的 “刷新 ”按钮 
收 ” 标 识 


SW 








ds 
4 


现实 生活 中 人 们 的 手势 视觉 界面 中 的 图 标 或 表情 
(拇指 朝 上 ) (拇指 朝 下 ) (支持 / 强 ) (反对 / 弱 ) 


dey 
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6.1.4 ”格式 塔 心理 学 的 局 示 


格式 塔 是 德 文 Gestalt 的 汉语 音译 ( 英文 翻译 为 form 或 shape )， 意 
思 是 “ 完 形 ”"。 因 此 ， 格 式 塔 心理 学 又 叫 完 形 心理 学 。 所谓 完 形 主要 指 
大 人 往往 是 从 政体 夫 认 识 一 个 事物 而 不 是 一 部 分 扣 下 丰 关 伏 册 5 

格式 塔 一 词 有 两 种 含义 : 中 形状 或 形式 ， 即 物体 的 性 质 ; @ 具 体 的 实 
体 和 具有 一 种 特殊 形状 或 形式 的 特征 ， 涉 及 物体 本 身 ， 而 不 是 物体 的 特殊 
形式 。 格 式 塔 心理 学 诞生 于 1912 年 ， 强 调经 验 与 行为 的 整体 统一 。 格 式 
塔 心理 学 的 核心 是 给 不 完整 的 视觉 信息 寻找 最 简单 直接 的 解读 办 法 。 和 鲁 道 
夫 。 阿 恩 海 姆 ( Rudolf Arnheim ) “提出 表现 性 是 知觉 式样 的 一 种 固有 性 
质 。 他 强调 视觉 思维 中 知觉 具有 理解 能 力 ， 能 够 进行 选择 、 简 化 、 抽 象 、 
分 析 和 综合 等 活动 。 

格式 塔 心理 学 在 移动 应 用 的 视觉 设计 中 ， 可 以 指导 设计 师 们 如 何在 有 
限 的 空间 中 向 用 户 传达 更 丰富 的 信息 。 灵 活 地 使 用 格式 塔 心理 学 可 以 帮助 
设计 师 设 计 一 个 架构 或 者 界面 中 的 从 属 关 系 ， 还 可 以 利用 这 些 原则 设计 界 
面 中 一 些 特别 需要 用 户 注 意 的 模块 元 素 ， 制 造 一 些 具 有 深刻 影响 的 视觉 平 
衡 ， 让 用 户 更 轻易 地 解读 界面 。 格 式 塔 心理 学 通过 人 们 的 心理 模型 提出 基 
于 知觉 判断 层面 的 5 个 基本 原则 : 接近 性 原则 、 相 似 性 原则 、 连 续 性 原 
则 、 闭 合 性 原则 、 对 称 性 原则 。 接 近 性 原则 和 相似 性 原则 与 对 象 分 组 倾向 
相关 ， 而 后 三 者 与 用 户 的 视觉 系统 视图 解析 模糊 或 者 填补 遗漏 来 感知 整个 
物体 的 倾向 相关 ( 见 表 6-2 ) 。 

( 1 ) 接近 性 原则 

在 实际 生活 的 空间 和 时 间 上 ， 用 户 通常 认为 某 些 彼此 接近 或 距离 较 近 
的 事物 更 容易 组 成 整体 。 在 表 6-2 中 ， 距 离 较 近 而 且 平 行 的 圆圈 会 自然 
成 为 一 个 整体 ， 因 此 用 户 会 认为 左 图 中 的 圆圈 排 成 了 三 行 ， 而 右 图 中 的 圆 
圈 则 排 成 了 三 列 。 

在 移动 应 用 界面 视觉 设计 中 ， 可 以 通过 拉 近 某 些 对 象 之 间 的 距离 使 其 
在 视觉 上 成 为 一 组 ， 多 用 来 进行 相似 或 相同 属性 内 容 的 归 组 。 

例如 ， 在 界面 中 通过 接近 性 原则 将 属性 相同 的 项 目 放 置 在 一 起 ， 用 户 
便 能 快速 、 自 然 地 感知 它们 的 关系 并 进行 操作 。 接 近 性 原则 在 移动 应 用 界 
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面 中 得 到 广泛 运用 ， 不 仅 能 帮助 组 织 和 分 布 内 容 ， 还 能 在 视 欧 上 引导 用 户 
进行 高 效率 的 操作 。 因 此 ， 设 计 师 要 将 界面 中 的 信息 、 控 件 、 文 字 等 内 容 
进行 合理 地 分 组 ， 并 通过 接近 性 原则 帮助 用 户 快 速 运 到 目的 。 

(2 ) 相似 性 原则 

在 其 他 因素 相同 的 前 提 下 ， 用 户 容易 将 彼此 相似 的 事物 看 成 一 个 整体 
或 组 合 。 无 论 是 相似 的 形状 和 大小， 还 是 相似 的 颜色 和 强度 ， 部 会 被 用 户 
自动 地 集合 起 来 。 在 表 6-2 的 第 2 行 中 ， 左 图 的 圆圈 使 用 户 感 知 它 们 为 
一 个 整体， 而 看 将 第 二 列 与 第 四 列 的 圆圈 芍 换 成 灰色 的 所， 用 户 则 会 目 动 
地 将 圆圈 集合 为 一 组 ， 灰 点 归 为 另外 一 组 。 如 此 一 来 ， 原 本 单一 的 整体 就 
锌 分 成 为 了 四 个 组 。 

移动 应 用 宅 面 视 帝 设计 可 以 通过 相似 原则 将 同类 元 素 集合 在 一 起 。 例 
如 ， 当 用 户 需 要 选择 多 个 项 目 时 ， 已 被 用 户 选 择 的 项 目 会 在 视 疯 样式 上 有 明 
显 区 分 于 未 被 选择 的 项 目 ， 这 时 用 户 能 潜意识 地 将 两 组 内 容 进 行 分 类 。 在 
多 数 情况 下 ， 相 似 性 原则 与 接近 性 原则 需要 配合 使 用 ， 不 同属 性 的 内 容 不 
仅 要 在 各 组 元 素 距 离 上 进行 区 分 ， 还 要 在 颜色 和 形态 上 进行 明显 的 差异 化 
Te 

( 3 ) 连续 性 原则 

连续 性 是 指 它 的 构成 成 分 沿 看 已 经 明确 的 方向 连续 下 去 ， 形 成 对 称 、 
平衡 或 延伸 的 运动 轨迹 。 用 户 的 视觉 具备 一 定 的 活动 惯性 ， 倾 向 于 看 到 连 
续 的 形式 ， 必 要 时 便 会 填补 遗漏 。 例 如 ，IBM 公司 的 标 忘 设计 虽然 采用 了 
非 连 续 性 的 蓝 色 块 组 成 了 IBM 的 标识 ， 但 用 户 却 能 轻松 辨别 三 个 粗 体 字 
母 。 在 表 6-2 第 3 行 中 ， 用 户 会 将 左 图 视 为 两 条 相交 的 曲线 ， 而 不 是 两 
个 市 有 尖 角 的 折线 ;将 右 图 视 为 两 条 相交 的 直线 ， 而 不 是 4 段 直 线 。 

移动 应 用 界面 视觉 设计 可 以 通过 连续 性 原则 引导 用 户 进行 正确 并 且 高 
效 的 操作 。 

例如 ， 在 一 个 页 面 中 ， 左 右 两 边 的 内 容 未 被 完全 显示 出 来 ， 用 户 依 然 
能 将 左 中 右 的 信息 联系 起 来 并 认识 到 左右 两 边 有 未 读 内 容 ， 可 以 退 过 左右 
滑动 切换 到 看 不 同 页 和 的 信息 。 这 是 视觉 界面 中 常用 的 信息 阅读 引导 方 
法 。 因 此 ， 采 用 连续 性 原则 不 仅 能 使 移动 应 用 界面 在 视 党 表现 上 更 为 简 
洁 ， 还 能 帮助 用 户 降 低 学 习 成 本 。 
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表 6-2 格式 塔 心理 学 在 移动 应 用 界面 视觉 设计 中 的 运用 


图 示 实际 应 用 
列表 栏目 区 分 


OO0O0 
OOOD 
IAG 
OO 





连 
续 
性 
原 
则 





文件 安装 图 标 


音乐 图 标 


尝 泗 陀 吵 吾 





尝 沪 了 萃 浪 闪 


1 





(4 ) 闭合 性 原则 

知觉 的 基本 形式 是 由 它 的 组 成 部 分 模式 决定 的 。 用 户 在 知觉 上 具有 闭 
合 的 倾向 ， 只 要 各 部 分 的 模式 保持 不 变 ， 用 户 会 将 不 完整 的 图 形 在 心理 上 
使 之 趋 合 。 在 表 6-2 第 4 行 中 ， 虽 然 左 图 的 圆圈 缺 了 4 个 小 口 ， 但 用 户 
依然 会 将 其 视 作 完整 的 圆 形 ; 即使 右 图 中 只 有 三 个 灰色 且 不 完整 的 圆 点 ， 
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但 用 户 会 感知 到 画面 中 存在 一 个 白色 的 三 角形 。 闭 合 性 原则 是 与 连续 性 原 
则 相关 和 相似 的 格式 塔 原理 。 

在 移动 应 用 界面 视觉 设计 中 ， 闭 合 性 原则 常用 于 图 标 设计 中 ， 设 计 师 
力图 用 简约 的 视觉 语言 传达 给 用 户 更 多 的 内 容 。 

例如 ， 通 过 半边 的 碟 片 形式 表示 文件 安装 的 合 义 ， 尽 管 没 有 完整 的 图 
形 样式 ， 但 用 户 的 视觉 系统 仍然 能 将 残缺 的 部 分 关联 起 来 ， 使 其 连 成 一 个 
完整 的 图 形 。 

(5 ) 对 称 性 原则 

自古 以 来 ， 人 们 往往 认为 对 称 的 物体 最 稳定 、 平 衡 ， 也 更 具有 美感 。 
在 现实 生活 中 ， 用 户 的 视觉 区 域 中 不 止 有 一 个 可 能 的 解析 ， 用 户 通常 更 倾 
向 于 分 解 复杂 的 场景 来 降低 复杂 度 ， 用 户 的 视 竞 系统 会 自动 组 织 并 解析 数 
据 ， 从 而 简化 这 些 数据 并 赋予 它们 对 称 的 属性 。 在 表 6-2 第 5 行 中 ， 左 
图 复杂 的 形状 会 被 用 户 看 成 是 右 图 中 两 个 车 加 的 萎 形 ， 而 不 是 两 个 顶部 对 
接 的 “L” 形 或 一 个 小 菱形 在 中 间 的 八 边 形 。 这 是 由 于 用 户 的 视觉 系统 认 
为 一 对 苔 加 的 萎 形 比 其 他 两 种 解释 更 对 称 、 简 单 和 更 容易 理解 。 

在 移动 应 用 界面 视觉 设计 中 ， 一 般 采 用 对 称 性 的 原则 表现 三 维 视觉 效 
果 。 例 如 ， 在 图 标 设计 中 ， 设 计 师 会 采用 不 同色 彩 、 图 形 的 二 维 图 像 元 素 
来 表现 一 些 组 合 而 成 的 复杂 图 像 ， 而 用 户 则 会 将 这 些 复杂 图 像 轻 松 地 解析 
为 三 维 图 像 效 果 。 这 是 因为 用 户 会 通过 对 称 性 的 视觉 惯性 将 界面 中 的 视觉 
元 素 往 简单 和 易 懂 的 方向 延伸 。 

格式 塔 心理 学 五 项 原则 在 移动 应 用 视觉 界面 设计 中 的 运用 并 不 是 孤立 
存在 的 ， 它 们 之 间 不 仅 有 着 多 种 联系 还 能 相互 作用 。 它 们 可 以 用 来 验证 视 
交界 面 中 各 元 素 的 合理 性 是 否 符合 用 户 的 视觉 惯性 和 心理 模型 。 因 此 ， 设 
计 师 要 根据 目标 用 户 、 移 动 应 用 以 及 视觉 界面 的 特点 结合 格式 塔 心理 学 中 
的 原理 ， 进 行 理性 的 分 析 和 运用 ， 以 达到 提高 用 户 操 作 效 率 的 目的 。 


6.2| 原则 与 流程 
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面 用 户 能 够 扫 视 到 一 个 较 大 范围 的 内 容 或 者 鼠标 悬 停 在 某 个 元 素 上 查看 更 
多 的 信息 ， 移 动用 户 会 专注 于 一 个 相对 较 小 的 空间 。 通 过 明确 移动 界面 布局 
的 特点 和 掌握 移动 端 特殊 的 交互 方式 ， 能 够 创造 一 个 直观 的 移动 视觉 体验 。 

在 熟悉 手机 、 平 板 电脑 等 移动 设备 基本 的 可 用 性 参考 准则 前 提 下 ， 为 
了 更 好 地 传达 信息 ， 需 要 一 套 设 计 原 则 来 指导 视觉 设计 工作 。 

Smashing Magazine 网 站 ”提出 了 塑造 良好 移动 应 用 视觉 形象 的 原 
则 :， 对比、 重复 、 对 齐 、 接 近 度 和 分 组 、 纹 理 和 光线 。 

G 对 比 : 将 界面 中 的 不 同 元 素 作 出 鲜明 的 对 比 和 区 分 ， 方 便 用 户 阅 
读 并 操作 界面 。 

@) 重复 : 要 使 用 户 信任 和 熟悉 应 用 程序 ， 可 以 通过 为 相似 的 元 素 重 
复 使 用 相同 样式 ， 使 用 户 适 应 应 用 的 含义 及 其 元 素 。 

@ 对齐: 优秀 视觉 界面 中 的 元 素 应 该 通过 网 格 、 黄 金 比 例 框 架 、 屏 
幕 的 边缘 等 做 到 有 秩序 的 对 齐 。 例 如 ， 在 两 条 边缘 之 间 居 中 显示 按钮 或 构 
件 ， 在 工具 箱 中 居中 显示 按钮 ， 在 标签 中 居中 显示 文本 ， 在 按钮 中 居中 显 
示 图 像 ， 在 方 框 中 居中 显示 控件 ， 这 些 都 是 视觉 界面 对 齐 的 重要 细节 。 

(4) 接近 度 和 分 组 : 为 了 让 用 户 能 更 快 地 浏览 项 目 ， 认 清 界 面 各 元 素 间 
的 关系 ， 可 以 把 相似 或 相关 的 元 素 组 织 在 一 起 ， 构 成 一 个 聚合 的 整体 。 

(3) 纹理 : 由 于 生活 中 真实 物体 的 表面 都 有 细微 的 纹理 ， 因 此 为 了 使 
质感 接近 现实 生活 中 的 物体 ， 界 面 设计 中 的 元 素 要 加 上 纹理 的 设计 。 

(@) 光线 界面 视觉 设计 需要 通过 渐变 、 边 缘 高 光 、 块 光泽 和 阴影 匠 
效果 ， 使 界面 中 的 元 素 看 起 来 更 通 真 ， 更 接近 实际 物品 。 

在 以 上 设计 原则 中 ， 对 比 、 重 复 和 对 齐 主要 应 用 于 视觉 界面 设计 中 的 
整体 效果 ， 而 纹理 和 光线 则 主要 负责 界面 设计 的 质感 塑造 。 

移动 应 用 的 视觉 界面 是 用 户 与 设备 交流 的 媒介 ， 视 觉 上 的 体验 会 成 为 
用 户 判 断 应 用 好 坏 的 重要 依据 ， 它 是 遵循 用 户 心 理 模型 的 表现 载体 。 因 
此 ， 在 进行 视觉 界面 设计 时 需 符合 以 下 5 个 原则 : 

(1 ) 良好 的 隐喻 

隐喻 ( Metaphora ) 一 词 来 源 于 希腊 语 。 修 辞 学 中 把 两 个 事物 因 在 特 
征 上 存在 某 些 类 似 ， 而 用 其 中 一 个 事物 ( 喻 体 ) 来 指 代 兄 一 个 事物 ( 本 
体 ) 的 修辞 方式 叫做 隐喻 。 因 此 ， 了 隐喻 由 彼 类 事物 、 此 类 事物 和 两 者 之 问 
的 联系 三 个 因素 构成 ， 而 相似 性 是 隐喻 的 基础 和 灵魂 。Richards ( 1936 ) 
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在 《修辞 学 的 哲学 》 一 书 中 提 到 :“ 当 人 们 使 用 隐喻 时 ， 就 表示 把 两 个 不 
同事 物 的 概念 放 在 一 起 ， 这 两 个 思想 活跃 地 相互 作用 ， 其 结果 就 是 隐喻 的 
意义 。 隐喻 是 人 从 短期 记忆 上 升 到 长 期 记忆 的 关键 。 

当 通 过 视觉 设计 传达 信息 时 ， 隐 喻 能 成 为 一 个 非常 强大 的 解决 方案 。 
隐喻 通过 引用 一 个 已 存在 并 熟悉 的 元 素 或 视 沉 物体， 使 用 户 能 够 快速 地 理 
解 内 容 和 功能 。 尽 管 Windows 8 和 i0S 7 的 界面 视觉 表现 脱离 了 拟 物 化 的 
方法 ， 但 这 些 操作 系统 和 其 他 移动 站 点 与 应 用 程序 仍 在 使 用 更 加 简洁 的 隐 
喻 方式 来 表现 用 户 界 面 。 人 例如， 垃圾 桶 代表 删除 ， 真 实 摄像 机 代表 网 络 摄 
像 头 ， 信 封 代 表 电 邮 。 隐 喻 能 够 通过 不 同 的 方法 文 持 信息 和 主题 的 传播 。 

隐喻 可 以 被 用 作 延 伸 到 一 个 单独 的 设计 元 素 之 外 ， 代 蔡 成 为 设计 或 功 
能 的 一 个 关键 主题 。 在 Flipboard 应 用 程序 中 ( 见 图 6-10 )， 具 有 翻 书 隐 
喻 的 快速 翻转 过 渡 是 其 用 户 交 互 的 一 个 不 可 分 割 的 部 分 ， 交 互 的 顺利 实现 
是 其 应 用 程序 成 功 的 一 个 关键 因素 。 以 这 种 方式 使 用 隐喻 ， 能 够 向 用 户 快 
速 传递 概念 ， 也 能 使 应 用 拥有 一 个 独特 的 产品 属性 。 
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隐喻 修辞 方式 在 图 形 界 面 设计 中 能 简化 一 些 操作 过 程 ， 使 一 些 复杂 的 
功能 变 得 蝎 易 理解 ， 其 主要 作用 如 下 : 

(D 易于 识别 。 用 户 往往 能 够 很 容易 地 通过 优秀 的 隐喻 图 形 符号 三 
面 形成 互动 ， 迅 速 地 了 解 图 形 界 面 所 表达 的 含义 。 因 为 ， 
活 习 惯 和 经 验 的 隐喻 修辞 方式 可 以 减少 用 户 的 学 习 成 本 ， 更 容易 被 用 户 所 

(易于 记忆 。 通 过 隐喻 设计 后 的 图 形 符号 会 比 单纯 的 文字 指令 更 为 
直观 有 效 ， 也 更 易 记 忆 。 

(8) 能 够 跨 文化 理解 。 界 面 图 形 的 跨 文化 性 特点 常常 出 现在 一 些 类 做 
做 软 Windows 操作 系统 的 全 球 性 软件 当中 ， 因 为 它们 需要 慎重 竹 虑 不 同 地 
域 文 化 的 区 别 ， 把 握 通 用 性 设计 原则 ， 让 全 球 不 同文 化 育 景 的 用 户 都 容易 
使 用 产品 界面 。 

由 提升 程序 运行 效率 。 相 对 于 复杂 的 后 从 程序 ， 具有 良好 隐喻 , 
图 形 符号 可 以 节省 软件 的 存储 和 运行 空间 用 于 说 明 同 样 的 内 容 与 概念 
不 但 简化 了 界面 ， 也 能 促进 界 es 

归纳 与 联想 是 图 形 界面 设计 两 种 创建 隐喻 的 主要 方法 。 设 计 师 需要 
会 深度 挖掘 事物 之 间 的 本 质 联系 ， 通 过 物 与 物 之 间 直 接 或 潜在 的 联系 来 他 
建 合适 的 隐喻 。 

此 外 ， 设 计 师 需要 有 全 局 观念 ， 对 图 形 界 面 隐喻 系统 中 的 内 部 关系 进 

行 综合 考虑 ， 在 系统 思维 的 指导 下 处 理 好 隐喻 系统 的 整体 性 和 局 部 细节 设 
We 打造 一 个 用 户 易 于 理解 和 使 用 的 界面 。 对 隐喻 的 应 用 在 图 标 设 
2 人 ER 

) 重要 控件 设计 突出 

ee s 则 使 设计 师 必须 思考 如 何 最 有 效 地 展示 内 容 和 交 

， 界 面 的 视觉 设计 需要 简 清 而 专注 。 

因此 ， 应 用 中 的 重要 控件 要 被 设计 得 更 加 突出 ， 方 便 用 户 寻 找 和 使 
用 。 其 设计 方法 主要 有 以 下 两 种 ;采用 高 对 比 度 的 设计 方法 与 加 ( 重大 ) 
选项 颜色 ( 字体 ) 的 万 法 。 采 用 高 对 比方 法 内 一 个 重要 原则 是 ， 计 其 对 比 
足够 强烈 。 设 计 师 罗 宾 .威廉 姆 斯 ( Robin ) 曾经 说 过 : “如 果 两 个 项 不 
完全 相同 ， 就 应 当 使 之 不 同 ， 而 且 应 当 是 规 然 不 同 。 am 采用 高 对 比 度 
的 方法 有 多 种 ， 如 冷色 与 暖色 的 对 比 等 。 当 其 他 因素 ( 如 移动 设备 的 硬 
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件 ) 无 法 文 持 对 比 度 加 强 时 ， 设 计 师 可 以 选择 加 重 选 项 的 颜色 或 加 大 字体 
的 方法 来 买 现 控件 的 突出 。 

( 3 ) 信息 表达 符合 用 户 的 心理 模型 

在 移动 应 用 中 ， 功 能 和 选项 是 帮助 用 户 完 成 目 定 目标 的 桥架 。 用 户 需 
要 按照 信息 提示 来 进行 操作 ， 因 此 人 设计 师 要 确保 信息 表达 的 准确 性 ， 尽 量 
从 合用 户 的 心理 模型 。 例 如 ， 在 一 款 相 厂 处 理 的 应 用 中 ， 用 户 会 进行 旋 
转 、 调 整 对 比 度 或 滤 镜 等 操作 ， 这 些 操 作 项 目的 图 标 、 图 形 或 文字 设计 越 
接近 目标 用 户 的 心理 模型 就 越 能 市 给 用 户 使 用 时 的 乐趣 ， 使 其 感到 轻松 ， 
反之 则 会 破坏 应 用 本 身 的 价值 。 

( 4) 整体 一 致 性 

整体 设计 的 一 致 性 要 求 移 动 应 用 视 先 界 血 的 不 同 模 块 、 图 形 图 
标 、 文 字 等 要 尽 可 能 地 保持 相同 的 外 观 及 风格 。 因 此 ， 这 要 求 视觉 设 
计 师 在 保证 应 用 界面 信息 完整 表达 的 同时 尽 可 能 地 遵循 该 原则 。 其 主 
要 的 表现 方式 如 下 : 关 似 的 视觉 元 素 在 屏幕 中 置 于 合适 的 位 置 ， 相 同 
含义 的 界面 、 文 字 、 图 标 保持 视觉 统一 ， 定 义 图 标 或 界面 的 外 观 要 上 
这 个 功能 或 操作 的 自身 意义 保持 一 致 。 此 外 ， 应 用 界面 的 布局 还 需要 
保持 一 致 ， 其 基本 的 视 况 布局 不 能 发 生 大 的 改变 。 人 例如， 界面 中 决定 
整体 框架 的 导航 栏 不 仅 应 该 放置 在 每 一 页 的 相同 位 置 ， 还 要 设计 成 统 
一 的 视 阁 杆 式 ; 如 果 按 钮 在 界面 不 同 部 分 的 相同 位 置 ， 那 么 应 该 通过 视 
元 设 计 使 这 些 按钮 体现 相同 的 功能 属性 。 

按照 信息 的 重要 性 排序 ， 设 计 师 应 将 请 如 导航 、 完 成 、 保 存 等 弟 用 操 
作 放 置 于 手机 屏幕 的 项 疹 。 因 为 依据 用 户 阅 读 信 息 的 流程 ， 玫 机 屏幕 的 上 
半 部 分 可 阅读 性 最 强 。 而 一 些 诸如 标签 栏 和 工具 栏 的 次 要 信息 一 般 位 于 手 
机 屏幕 的 底部 。 此 外 ， 为 了 使 用 户 能 够 迅速 地 收 到 强烈 的 上 暗示， 设计 师 常 
弟 将 一 些 请 如 删除 等 重要 操作 放置 于 屏幕 的 项 部。 

( 5 ) 提供 用 户 目 定 义 个 性 设置 

移动 应 用 的 类 别 繁多 ， 使 用 人 群 也 较为 上 广泛。 在 年 畦 人 的 群体 中 ， 他 
们 冯 望 在 应 用 中 表现 和 目 我， 体现 自 我 的 个 性 和 风格 。 例 如 ， 商 务 和 自 领 人 
会 布 望 应 用 的 视觉 大 血 能 体现 一 种 成 熟 、 稳 重 和 高 趴 的 风格 。 因 此 ， 设 
计 师 需要 根据 目标 人 群 的 不 同 特征 提供 不 同 界 面 风格 的 选择 。 这 些 不 同 风 
格 的 表征 不 仅 可 以 体现 在 界面 皮肤 ， 还 可 以 体现 在 字体 或 其 他 的 自 定义 选 
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项 中 ( 见 图 6-11 ) 。 


Heat Map Heat Map Pretty Princess Heat Map 


Graphite Graphite Lucky Clover Graphite 
Pretty Princess Pretty Princess Theme Noir Pretty Princess 
Lucky Clover Lucky Clover Magnificent Lucky Clover 


Theme Noir Theme Noir Whale Theme Noir 


Magnificent 


Ntstelalile san Sunflowers Eteliiilwsil 
Whale Whale Path 次 Whale 


Sunflowers Sunflowers Vanilla 次 Sunflowers 
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综 上 所 述 ， 只 有 当 设 计 师 掌握 了 以 上 设计 原则 ， 才 会 有 能 力 超越 这 些 
指南 ， ee ek ee 而 坚持 为 用 户 考虑 ， 将 使 
设计 师 在 功能 和 美学 之 间 达 到 一 个 完美 的 平衡 。 


6.2.2 沉 程 


从 交互 设计 到 视 辕 设计 是 一 个 从 抽象 化 到 具象 化 的 过 程 。 正 如 杰 
西 ， 和 詹姆斯。 加 瑞 特 ( Jesse James Garrett ) 的 用 户 体 验 要 素 模 型 所 表述 
A eh ee rae 
学 设计 是 一 个 相互 景 0 咱 和 合作 且 过 程 。 ss 视 涡 设计 流程 可 以 按 
照 品 脾 视 觉 定 位、 关键 词 、 集 合 、 提 炼 和 茶 ee 设计 探索 、 视 剖 
风格 标准 、 视 腕 元 素 组件 和 修正 9 ee | 见 图 6 一 12 )。 
1 ) 品牌 视 况 定位: 询 悉 该 品牌 的 品牌 文化 ， 系 列 产 品 的 区 分 尽 以 
及 明确 目标 用 户 ， 并 结合 市 场 分 析 深 刻 理 解 该 品牌 的 独特 属性 及 战略 
定位 。 
2 ) 关键 词 : 通过 与 相关 竞 品 比较 分 析 ， 在 品牌 定位 与 用 户 需求 的 基 
础 上 ， 归 纳 出 能 够 全 面体 现 品 牌 及 产品 专 有 属性 的 关键 词 ， 为 后 续 设 计 的 
开展 起 到 指导 作用 。 
3 ) 集合 : 在 设 定好 的 关键 词 指导 下 ， 收 集 一 些 能 够 让 用 户 在 情感 和 
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认 知 上 得 到 共鸣 的 图 形 图 像 材料 ， 其 中 颜色 的 控制 主要 在 设计 流程 的 集合 

和 提炼 茶 取 这 两 个 步骤 完成 。 在 集合 过 程 中 所 收集 的 图 片 是 基于 目标 用 户 

和 关键 词 的 ， 因 此 当 收 集 的 图 片 数量 达到 一 定 程度 后 ， 其 颜色 或 质感 等 属 
性 图 片 会 按 一 定 规 律 向 某 一 类 相似 属性 进行 集中 。 

| 品牌 视觉 定位 | 

关键 词 

集合 

| ”提炼 和 茜 取 | 

情境 板 

设计 探索 | 

| 视觉 风格 标准 | 

视觉 元 素 组 件 | 


修正 | 
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4 ) 提炼 和 茶 取 : 从 收集 的 图 形 图 像 材料 中 提取 具有 代表 性 的 颜色 
或 质感 等 属性 。 提 炼 和 茶 取 的 关键 是 明确 设计 目标 ， 尤 其 是 确定 能 够 
让 用 户 得 到 共 喝 的 情感 方向 ， 这 就 需要 设计 师 本 人 全 身心 地 融入 到 月 
标 期 望 ( 关键 词 ) 的 环境 之 中 ， 以 便 从 中 发 掘 具有 代表 性 的 颜色 或 质 
感 等 属性 。 

5 ) 情境 板 ， 设计 一 些 简单 的 基本 框架 来 匹配 从 集合 材料 中 提炼 和 葵 
取 的 风格 和 样式 。 在 情境 板 设 计 阶 段 中 ， 重 点 在 于 能 让 设计 师 自 由 地 进行 一 
些 概 念 性 的 设计 ， 使 个 人 情感 能 够 轻易 地 融入 设计 的 主题 之 中 ， 并 对 类 似 的 和 
不 同 的 概念 思考 有 明显 的 识别 ， 从 而 更 充分 地 继承 前 一 阶段 的 工作 。 

6 ) 设计 探索 ， 从 不 同 的 视角 反复 完善 界面 的 设计 锥 形 ， 提 出 更 多 的 
基于 情境 板 中 感受 到 的 风格 和 样式 。 在 展示 设计 阶段 ， 需 要 在 前 一 阶段 设 
计 的 基础 上 ， 通 过 不 同 的 视角 、 环 境 尝 试 不 同 的 方法 ， 创 造 出 更 多 玩具 创 
新 的 设计 版 本 。 

7 ) 视觉 风格 标准 : 从 展示 设计 中 根据 产品 的 设计 策略 和 功能 
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属性 精 先 出 最 适当 的 设计 来 决定 产 喇 的 最 终 视 党 风格 作为 后 续 的 设计 
标准 。 

8 ) 视觉 元 素 组 件 : 和 根据 最 终 定 稿 的 风格 和 布局 来 设计 其 他 的 界面 组 件 。 

9 ) 修正 : 提炼 和 茎 取 、 人 情境 板 和 设计 探索 是 界面 视觉 设计 流程 的 核 
心 阶 段 ， 为 了 让 视觉 设计 得 到 更 多 用 户 在 情感 和 认 知 上 的 共鸣 ， 需 要 在 复 
杂 的 情境 中 进行 验证 并 获取 不 同 的 反馈 ， 在 分 析 反 馈 的 基础 上 作出 合适 的 
设计 修正 。 


6.3 担 升 枫 匈 体验 的 要 总 与 谤 计 万 法 


6.3.1 主题 与 色 采 


KR 


(1 ) 主题 

界面 主题 是 所 有 视觉 组 成 元 素 的 基础 ， 对 于 移动 应 用 视觉 界面 设计 尤 
其 如 此 。 在 视 帝 设计 前 定义 应 用 的 视 帝 主题 能 吸引 多 数 用 户 的 眼球 ， 提 高 
他 们 使 用 应 用 的 积极 性 。 应 用 的 视 竞 主题 还 需要 符合 用 户 的 心理 模型 ， 与 
用 户 之 间 产 生 深 层次 的 共鸣 。 

视 郊 设计 师 需 要 基于 目标 用 户 群 体 并 结合 当下 流行 的 风格 元 素 构 思 出 
多 人 又 视 辕 界 向 的 主题 ， 并 从 中 挑选 一 种 主题 进行 细 化 。 当 确定 了 应 用 的 视 
元 界 向 主题 之 后 ， 其 他 元 素 ( 如 图 标 、 色 彩 、 功 能 控件 等 ) 都 需要 与 寞 面 
整体 的 风格 保持 统一 。 例 如 ，QQ 音乐 4.3 版 本 采用 宇宙 、 星 空 作 为 视 帝 
设计 主题 ， 市 给 用 户 一 种 空灵 、 神 秘 的 感觉 ( 见 图 6-13 )。 

(2) 色彩 

色彩 是 男 一 个 传达 信息 的 重要 工具 ， 它 能 够 通过 各 种 方式 来 文 持 内 容 
的 传达 和 交互 。 人 对 色彩 的 感觉 主要 体现 在 感 竞 层 相 观念 层 。 感 况 层 是 用 
户 爱 到 物理 刺激 后 产生 的 不 同感 户 之 间 的 联 况 反应， 如 红色 显得 喜庆 、 紧 
色 显 得 神秘 、 监 色 显 得 清 装 、 绿 色 显 得 清新 、 黄 色 显 得 过 上 暖 、 和 白色 显得 轻 
熏 、 黑 色 显 得 严肃 。 观 念 层 是 用 户 经 验 所 造成 的 象征 和 联想 。 人 例如， 交通 
信号 灯 中 ， 红 色 代 和 表 停 ， 绿 色 代 和 走 。 在 任何 领域 应 用 色彩 符号 均 需 要 人 研 
究 色 彩 背后 的 文化 与 象征 ， 并 进行 合理 的 调度 、 搭 配 与 设计 。 因 此 ， 设 计 
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师 要 结合 色彩 的 所 措 、 能 指 及 其 象征 意义 、 目 标 用 户 的 文化 育 景 、 产 品 本 
质 与 定位 进行 色彩 设计 。 


0999 中 国 移动 所 10:36 @ * 28% DO 
就 像 迷路 时 在 每 个 你 需要 音乐 的 时 刻 音乐 馆 小， 
. 只 要 抬头 仰望 北斗 星 就 能 找到 方向 下 拉 iOS8 通 知 中 心 :就 能 找到 我 推荐 ”排行 ” 歌 单 电台 分 类 
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中 使 用 明确 的 色调 和 明暗 关系 : 有 助 于 传达 一 个 整体 的 视觉 印象 。 
明快 大 胆 的 颜色 给 人 以 愉快 的 感觉 ， 较 上 暗 的 色调 给 人 以 一 种 优雅 的 感觉 求 
气氛 ， 结 合 更 多 灰色 的 柔和 色相 给 人 一 种 怀旧 复古 的 感觉 。 

@ 使 用 强 对 比 色 : 有 助 于 传达 差异 ， 在 内 容 或 功能 之 间 形 成 关联 。 

@ 使 用 中 性 和 明亮 的 搭配 色 : 有 助 于 确保 某 些 具体 元 素 在 用 户 面前 
叫 显 出 来 。 色 彩 可 以 被 用 于 突出 内 容 条 目 ， 显 示 条 目 之 间 如 何 关联 ， 内 容 
的 结构 是 如 何 分 开 的 。 

通过 美国 Hubspot 公司 开展 的 一 个 AB 测试 表明 : 在 购物 类 网 站 
中 ， 红 色 按 钮 比 绿色 按钮 的 尽 击 率 更 高 ， 这 是 因为 红色 会 唤起 用 户 扩 
击 的 欲望 ， 演 染 一 种 紧张 刺激 的 氛围 ， 适 合 在 团购 、 抢 购 、 秒 杀 、 
告 等 情境 中 使 用 ; 而 绿色 则 会 带 给 用 户 一 种 安全 、 放 心 的 感 沉 ， 适 合 
在 登录 、 和 确认 等 情境 中 使 用 。 除 了 红色 ， 权 色 是 购物 网 站 中 常见 的 凑 
色 ， 因 为 档 色 更 加 柔和 和、 亲切 、 活 泌 ， 容 易 引 起 用 户 注意 ， 又 不 会 显 
得 太 突 光 。 因 此 手机 淘宝 等 移动 应 用 界面 中 的 购买 按钮 通 利 采用 栖 色 
( 见 图 6-14 )。 

移动 应 用 界面 中 的 每 一 个 视觉 要 素 都 需要 “上 色 ` ， 因 此 单个 元 素 以 
及 各 个 元 素 间 的 颜色 搭配 显得 尤为 重要 。 设 计 师 要 在 保证 视觉 协调 完好 的 
基础 上 创造 出 有 效 的 视觉 界面 。 也 就 是 访 ， 应 用 界面 的 色彩 设计 是 一 个 理 


0> 哈 


ll 





195 





性 的 系统 设计 过 程 。 在 开展 实际 的 设计 活动 时 ， 咎 设计 的 主要 目的 是 吸引 
注意 力 ， 可 以 运用 饱和 色 ( 纯色 ); 看 阅读 的 舒适 度 是 主要 目的 ， 则 可 以 
运用 去 饱和 上 度 的 颜色 ， 将 同色 系 、 色 祖 和 灰 度 的 颜色 进行 搭配 使 用 ， 能 使 
视 况 界面 显得 更 加 协调 和 友好 。 


四 eeeee 中 国 移动 令 9220.25 @ * 100% 男友 
口 … 《 宝贝 详情 I op 
再 











上 盖 360ml/480ml， 四 色 随 心 选择 会 
emoi 基 本 生活 环保 学 生 杯 便携 随行 茶水 杯 .…… 
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6-14 淘宝 商品 详情 界面 
本 下 通 过 理论 与 实践 总 结 出 的 移动 应 用 界面 色彩 选取 的 具体 方法 


wl 
Q) 采用 调 色 瘟 的 方式 ， 预 置 几 种 ( 不 超过 5 种 ) 颜色 组 
0 案 。 
设计 团队 可 以 先 明 确 一 个 主 色 调 ， 然 后 通过 调整 透明 度 


J = y 并 通 通过 


和 饱和 度 来 产 


移动 应 用 界面 的 设计 亡 法 与 实践 
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生 丰 富 的 颜色 层次 ， 以 表达 不 同 层 级 的 界 和 面 内 容 ， 这 样 看 起 来 色彩 统一 、 
有 属 次 感 ， 仅 用 一 个 主 色 调 就 能 展现 恨 好 的 视觉 效果 。 

另外 ， 局 平 化 设计 风格 的 流行 ， 促 使 移动 应 用 界面 大 胆 运 用 多 色彩 接 
配 ， 简 单 的 纯色 色 块 通过 版 面 拼 接 赋 耶 界 面 以 时 疝 现 代 的 气 已。 

包 耕 为 一 个 企业 或 吾 联 网 平台 设计 一 款 移动 应 用 ， 可 以 提取 其 已 有 
品牌 形象 中 的 颜色 为 主 色 ， 其 他 颜色 则 采用 与 之 相近 的 颜色 ， 或 选取 主 色 
色相 盘 中 的 其 他 颜色 。 

@ 硝 是 一 个 单独 的 移动 应 用 ， 则 按照 目标 用 户 的 喜好 与 产品 的 属 
性 ， 设 计 整 套 视觉 颜色 配色 方案 。 灵 感 可 以 来 产 于 一 张 图 片 、 一 张 海 报 、 
一 套 包 闻 ， 攻 至 动物 的 皮毛 纹理 或 大 牌 服 交 。 


6.3.2 ”导航 与 布局 


将 移动 应 用 界面 的 导航 与 布局 进行 视觉 化 处 理 ， 能 使 从 面 层 次 更 加 清 
上 晰 、 真 实 ， 将 用 户 的 视线 依据 交互 设计 内 容 本 身 所 界定 的 路 径 进 行 自 然 移 
动 ， 增 强 了 界面 视 竞 的 平衡 感 。 恨 好 的 视觉 引导 能 降低 用 户 的 学 习 成 本 和 
出 销 概率 ， 提 高 用 户 使 用 应 用 的 效率 。 

( 1 ) 分 层 

移动 应 用 界面 导航 中 各 个 层级 需要 进行 视 竞 化 的 区 分 ， 人 否则 将 容 
易 使 用 户 产 生理 解 与 操作 上 的 障碍 。 人 例如， 在 抽 屠 导航 中 ， 将 抽 屠 标 
题 栏 与 抽 屠 展开 后 的 标题 或 信息 进行 视觉 差异 化 处 理 ， 能 使 用 户 快 速 
识别 两 类 信息 的 从 属 关 系 ， 并 根据 目 和 喘 需求 进行 选择 ( 见 图 6-15 )。 
因此 ， 将 导航 进行 视觉 化 分 层 处 理 能 明确 导航 中 各 层级 的 关系 ， 提 高 
户 理解 与 操作 的 效率 。 

( 2 ) 对 齐 

采用 对 齐 的 布局 方式 能 使 应 用 看 起 来 更 加 有 序 ， 为 用 户 视线 提供 一 种 
自然 的 边界 ， 增 加 设计 的 整体 美感 。 左 对 齐 和 右 对 齐 布局 能 创造 出 无 形 的 
“ 列 "， 呈 现 出 一 种 清晰 的 视觉 暗示 。 和 在 果 面 软件 界面 中 ， 用 户 的 眼 动 执 迹 
沿 着 子 母 “F” 运动 ; 而 在 移动 应 用 界面 中 ， 用 户 的 腿 动 轨迹 是 沿 着 子 苹 
“L” 运 动 的 。 因 此 移动 应 用 界面 于 适合 及 用 左 对 齐 的 布局 方式 。 例 如 ， 在 
应 用 注册 界面 将 表单 左 对 齐 能 使 用 户 沿 着 左边 列表 项 目 快速 完成 任务 ， 提 
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升 用 户 的 使 用 效率 。 

音乐 阅读 、 购 物 类 移动 应 用 都 比较 适合 采用 左 对 齐 的 布局 形 陈 
( 见 图 6-16 )。 最 重要 的 信息 ， 如 图 标 、 图 片 、 标 题 等 都 要 放置 在 每 一 个 
栏目 的 最 左边 ， 以 方便 用 户 浏览 。 


eeeee 中 国 移动 令 15:54 @7*79%)? eeeee 中 国 移动 全 15:55 @7* 80% 
口 《 商户 了 发 现 中 
姑 
-< 








附近 美食 智能 Q 搜索 
1 近 + 近 (智能 范 
附近 附近 (智能 范围 ) A 音乐 圈 
全 城 热门 商 区 500 米 
aD, 猿 你 喜欢 
西湖 区 1000 米 
(0) 听 歌 识 曲 
上 城区 2000 米 
身边 流行 
下 城区 5000 米 2 oi 
江干 区 角 歌手 


持 野 [7 





6-15 抽 导 导航 视 党 化 分 层 6-16 QQ 音乐 采用 左 对 齐 的 界面 布局 方式 


( 3 ) 分 组 

分 组 原理 类 仅 于 格式 塔 心 理学 中 的 接近 性 原则 ， 通 过 不 同 颜色 、 质 感 
等 视 交 化 方法 将 界面 信息 进行 分 组 ， 能 帮助 用 户 快 速 理解 各 组 信息 的 内 容 
以 及 各 组 信息 之 间 内 部 和 外 部 的 联系 。 分 组 使 界面 中 的 信息 布局 更 加 清晰 
和 富有 层次 ， 一 般 将 相同 内 容 或 属性 的 信息 放置 于 一 组 以 内 。 例 如 ，i03 
系统 设置 就 采用 视觉 分 组 的 形式 ， 将 设置 内 容 分 隔 成 9 个 模块 ， 为 用 户 操 
作 提 供 了 认 知 和 操作 上 的 便利 。 

如 今 的 分 组 无 论 是 在 视觉 样式 还 是 色彩 上 ， 越 来 越 俩 铝 于 局 平 
化 。 用 背景 颜色 人 讨 托 出 前 景 几 个 大 的 模块 ， 使 用 户 能 快速 分 辨 不 同 组 
别 〈 见 图 6-17 )。 
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eeeee 中 国 移动 仿 15:48 Ga 


于 主题 日 报 





是 已 关注 主题 


设计 日 报 关注 
好 设计 需要 打磨 和 研习 ， 我 们 分 享 灵 感 和 
路 径 


大 公司 日 报 已 关注 
站、 和 4 人 商业 世界 变化 越 来 越 快 ， 就 是 这 些 家 伙 干 
的 
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a 确 电影 日 报 已 关注 


的 除了 经 典 和 新 片 ， 我 们 还 关注 技术 和 产业 


互联 网 安全 已 关注 
把 黑客 知识 科普 到 你 的 面前 
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( 4 ) 芝 循 不 同 移动 系统 平谷 布局 特 所 

移动 应 用 视 帝 异 血 布局 需要 遵循 不 同系 统 平 合 的 基本 布局 万 式 和 设计 
指南 。 图 6-18 所 示 是 不 同型 号 的 iphone 界面 布局 ( 以 像素 px 表示 各 个 
模块 的 尺寸 ) ， 界 面 上 半 部 分 通 疝 用 来 显示 重要 信息 ， 界 面 下 半 部 分 用 来 
显示 与 用 户 行为 相关 的 操作 信息 。 状 态 栏 、 导 航 栏 、 中 间 内 容 、 标 签 栏 和 
工具 栏 共 同 组 成 了 i0S 系统 界面 中 的 基本 布局 。 设 计 师 要 按照 不 同 设备 布 
局 中 各 项 目的 像素 大 小 进行 界面 视 党 设计 。 


640px 


320px 
状态 栏 高 40px 
导航 栏 高 88px 
状态 栏 高 40px 
导航 栏 高 88px 


状态 栏 高 20px 
导航 栏 高 44px 


xd08t 
xd096 
xd9ETT 


- 标签 栏 高 98px 
工具 栏 高 88px 


一 标签 栏 高 98px 
工具 栏 高 88px 


标签 栏 高 49px 
工具 栏 高 44px 





iPhone-iPhone 3GS iPhone 4-iPhone 4S iPhone 5 


6-18 ”1i0S 系统 平 合 界 面 布 局 特点 
( 资料 来 源 :， www.uisdc.com ) 
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6.3.3 ”图标 设计 


设计 师 在 设计 移动 应 用 图 标 时 ， 除 了 要 应 对 图 标 自 身 复杂 概念 
的 传达 ， 还 要 考虑 其 有 限 的 屏幕 空间 。 因 此 ， 设 计 简 洁 而 又 有 创意 
的 图 标 是 一 个 富有 挑战 性 的 任务 ， 优 秀 的 图 标 设计 对 移动 应 用 的 视 
觉 层面 具有 重要 意义 。 理 解 图 标的 含义 及 其 设计 方法 是 非常 必要 的 
学 习 内 容 。 


1. 图 标的 分 类 


图 标 有 很 多 种 分 类 方式 ， 如 图 标 按 系 统 分 为 应 用 程序 图 标 、 文 件 夹 图 
标 、 文 档 图 标 ， 图 标 按 平台 分 为 网 页 图 标 、 软 件 图 标 、 游 戏 图 标 、 移 动 应 
用 图 标 、 家 用 电器 图 标 等 ， 图 标 按 表 现形 式 分 为 写实 图 标 、 卡 通 图 标 、 扁 
平 化 图 标 、 低 面 建 模 图 标 等 ， 图 标 按 层级 分 为 应 用 程序 图 标 、 一 级 图 标 和 
二 级 图 标 。 


2. 图 标的 隐喻 


图 标 设 计 使 用 视 竟 隐喻 已 经 成 为 了 行业 标准 ， 如 弟 见 的 删除 、 
网 络 、 摄 像 头 、 电 邮 等 图 标 不 需要 文字 注释 ， 用 户 就 能 快速 理解 它们 的 
含义 。 

在 图 标 设计 中 ， 隐 喻 通常 以 物 与 物 之 间 的 联系 以 及 功能 上 的 相似 点 为 
基础 ， 把 菏 一 事物 ( 或 条 种 功能 ) 比 做 另 一 事物 ( 或 行为 )， 从 而 达到 把 
抽象 的 事物 说 得 具体 ， 把 深奥 的 道理 变 得 浅显 的 目的 。 能 指 形似 性 隐喻 与 
所 指 相 似 性 隐喻 的 联系 如 图 6-19 所 示 。 记 忆 过 程 与 隐喻 的 关系 如 图 6-20 
所 示 。 





6-19 能 指 形似 性 隐喻 与 所 指 相似 性 隐喻 的 联系 
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转化 驻 留 提醒 | | 判断 经 验 


6-20 ”记忆 过 程 与 隐喻 的 关系 


隐喻 在 不 同 的 领域 有 不 同 的 分 类 标准 ， 本 书 将 隐喻 分 为 概念 隐喻 、 稚 
号 隐喻 和 行为 隐喻 ( 见 表 6-3 )。 


表 6-3 概念 隐喻 、 符 号 隐喻 与 行为 隐喻 在 图 标 设计 中 的 体现 


喻 体 


太阳 与 云 灯 
天 气 应 用 
直接 采用 这 些 元 素 
NE 来 隐喻 天 气 
对 多 
AN 效率 型 应 用 隐喻 每 当 用 户 完成 
一 项 任务 便 会 打 一 
个 对 多 
Clear 
跑步 
( 难 健康 型 应 用 隐喻 用 户 需要 通过 
喻 跑步 等 运动 增强 体质 
乐 动力 


(1 ) 概念 隐喻 

概念 隐喻 也 称 为 物理 隐喻 ， 它 是 退 过 相似 特征 的 比较 ， 从 上 自然界 
寻找 到 合适 喻 体 的 隐喻 形式 。 概 您 隐喻 类 似 界 面 设计 中 的 模拟 ， 是 比 
较 直 观 与 基础 性 的 隐喻 ， 本 体 和 喻 体 之 间 差 别 较 小 ， 因 此 容易 被 用 户 
识别 。 例 如 ， 智 能 手机 相册 应 用 一 般 选 取 相 框 或 相 刻 作为 喻 体 来 表达 
本 体 的 合 义 。 
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(2 ) 符号 隐喻 

在 理解 各 种 情景 的 基础 上 ， 对 现实 进行 一 定 抽象 形成 符号 。 符 号 隐喻 
与 概念 隐喻 相 比 具有 抽象 性 、 任 意 性 和 相对 性 的 特征 ， 与 社会 、 文 
化 、 习 俗 等 联系 紧密 ， 因 此 很 难 规定 其 具体 的 隐喻 形式 。 当 无 法 使 用 
概念 隐喻 时 ， 符 号 隐喻 是 一 个 合适 的 选择 。 例 如 ， 用 望远镜 表示 查 
找 、 用 握手 表示 社交 。 

( 3 ) 行为 隐喻 

通过 动态 元 素 的 表现 帮助 用 户 理解 应 用 的 意义 ， 启 示 用 户 应 该 采用 的 
操作 或 使 用 方法 。 行 为 隐喻 与 符号 隐喻 类 似 ， 也 是 一 种 抽象 的 隐喻 。 图 标 
设计 采用 行为 隐喻 能 明确 表达 含义 并 唤起 用 户 操作 的 欲望 。 例 如， 视频 或 
音乐 播放 的 应 用 中 出 现 分 享 、 播 放 、 暂 停 等 没有 文字 的 图 标 ， 能 直接 引导 
用 户 点 击 操作 。 

图 标 作为 一 种 视觉 传达 的 符号 ， 它 通常 用 来 帮助 用 户 理解 移动 应 用 中 
的 概念 、 功 能 或 操作 。 设 计 师 需 要 将 某 种 意义 用 图 形 图 像 的 形式 表达 出 
来 ， 但 这 种 表达 不 能 过 于 直 白 ， 需 是 一 种 设计 的 隐喻 。 隐 喻 是 设计 师 将 革 
一 熟悉 的 事物 特征 元 素 转移 到 图 标 设计 中 ， 利 用 已 知 的 经 验 给 予 用 户 强烈 
的 暗示 与 有 效 的 援助 。 

基于 隐喻 的 界面 图 标 设计 首先 要 通过 用 户 研究 分 析 目 标 用 户 需求 ， 再 
研究 图 标 ( 本 体 ) 的 概念 和 功能 。 明 确 所 要 表现 的 项 目 、 内 容 和 特征 ， 并 
提取 关键 词 或 中 心 词 ， 选 择 本 体 在 现实 世界 的 隐喻 解 ( 喻 体 )。 其 次 针对 
图 标的 外 延 功 能 属性 和 特征 ， 选 择 图 像 符号 和 标识 符号 来 表现 ， 针 对 精神 
属性 相关 的 内 涵 意义 ， 则 选择 能 反映 该 属性 的 喻 体 表 现 ， 如 象征 符号 。 最 
后 分 析 和 提炼 喻 体形 态 特征 ， 选 择 最 需要 表现 、 高 准 识 度 和 易 产 生 共鸣 的 
属性 和 特征 ， 将 所 提炼 的 特征 转化 为 设计 草稿 。 在 验证 、 测 试 和 细节 调整 
后 完成 最 终 设计 方案 。 

通过 分 析 与 实践 总 结 出 的 移动 应 用 界面 图 标 隐喻 的 设计 要 点 如 下 : 

@ 强调 隐喻 的 合理 性 。 在 设计 图 标的 过 程 中 要 遵循 两 个 隐喻 合理 性 
准则 。 首 先 功能 隐喻 要 结合 现实 ， 这 要 求 图 标 在 符合 用 户 既 有 的 经 验 基础 
上 ， 将 自身 的 功能 映射 到 现实 生活 中 去 寻找 匹配 的 隐喻 对 象 。 其 次 ， 如 复 
制 、 放 大 镜 等 被 用 户 广泛 接受 的 隐喻 要 保持 统一 不 变 。 设 计 师 需 要 依据 不 
同 的 软件 对 象 ， 灵 活 地 处 理 这 类 隐喻 ， 使 其 统一 在 整体 的 视觉 风格 里 ， 也 
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让 隐喻 元 素 更 符合 用 户 的 使 用 习惯 。 

@) 注意 隐喻 的 可 接受 性 。 将 一 个 隐喻 放 到 与 用 户 相 关 的 认 知 结构 共 
同 构成 的 文化 语 境 中 才能 理解 其 意义 。 不 同 的 国家 、 名 族 和 地 区 ， 在 文 
化 、 宗 教 、 生 活 方式 以 及 思维 方式 上 均 存 在 差异 。 因 此 ， 若 产品 面向 多 
个 国家 或 地 区 ， 要 考虑 不 同 语言 与 不 同文 化 背景 的 用 户 对 隐喻 的 认 知 
差异 ， 需 要 选择 能 够 被 广泛 理解 的 喻 体 。 

(3) 避免 复杂 及 不 匹配 的 隐喻 。 大 复杂 的 隐喻 会 造成 用 户 的 视觉 和 理 
解 负 担 ， 降 低 用 户 的 认 知 和 操作 效率 。 如 果 选 择 的 隐喻 对 象 与 图 标的 功能 
不 匹配 ， 则 会 给 用 户 带 来 认 知 的 负担 ， 甚 至 是 误 操 作 ， 也 就 更 谈 不 上 识别 
= 

(4 避免 图 标的 共 时 性 与 历时 性 。 共 时 性 指 一 段 时 期 内 ， 同 一 个 符号 
隐喻 不 同 的 事物 ， 历 时 性 指 经 历 长 时 期 的 变化 ， 不 同 符号 隐喻 同一 事物 。 
因此 ， 图 标 设计 要 避免 以 上 两 种 情况 的 发 生 。 选 择 隐喻 对 象 时 尽量 选择 图 
形象 征 意义 比较 单一 的 图 形 ， 如 果 隐 喻 对 象 有 很 多 其 他 的 指 代 合 义 ， 那 么 
很 容易 混淆 用 户 的 判断 力 。 

(3) 将 功能 性 、 视 觉 愉悦 性 、 易 理解 性 进行 良好 整合 和 统一 。 

3. 启动 图 标 设计 

启动 图 标 是 用 户 进 入 应 用 界面 的 第 一 入 口 ， 向 用 户 传达 应 用 的 最 基本 
信息 。 在 移动 设备 屏幕 琳琅 满目 的 启动 图 标 中 ， 视 觉 辨识 度 越 高 的 图 标 越 
能 吸引 用 户 识 别 和 点 击 。 不 仅 如 此 ， 启 动 图 标 还 能 影响 用 户 在 各 类 应 用 下 
载 商城 、 网 站 或 推荐 专区 中 的 应 用 点 击 率 和 下 载 率 。 因 此 ， 设 计 师 不 仅 需 
要 设计 美观 、 辨 识 度 高 的 局 动 图 标 ， 还 要 使 局 动 图 标 能 在 第 一 时 间 吸 引用 
户 眼球 ， 力 图 使 其 在 激烈 的 应 用 市 场 竞 争 中 获得 较 高 的 点 击 率 。 结 合 Jen 
Gordon 的 观点 ， 本 章 总 结 出 的 移动 应 用 界面 局 动 图 标的 设计 方法 如 下 : 

( 1) 运用 视觉 隐喻 

通过 隐喻 的 修辞 手法 使 用 户 快 速 理解 启动 图 标的 含义 。 例 如 ，LBS 应 
用 Foursquare 以 橡胶 球 古 中 一 个 四 方形 的 标记 作为 喻 体 ， 代 指 美 国 儿 童 喜 欢 
在 学 校 玩 的 一 种 游戏 ( 这 个 游戏 的 名 字 就 叫 Foursquare )， 如 图 6-21 所 示 。 
此 外 ， 在 运用 视觉 隐喻 的 同时 ， 还 要 保证 图 标的 高 辨识 度 和 可 识别 性 。 
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6-21 LBS 应 用 Foursdquare 
( 资料 来 源 : Afio.《5 个 你 不 知道 的 图 标 背 后 隐喻 》 ” ) 


(2) 分析 同 类 应 用 图 标 

根据 应 用 的 名 称 和 性 质 在 应 用 市 场 中 对 同类 应 用 图 标 从 第 一 感 竞 、 
色彩 、 材 质 、 质 感 、 层 次、 表现 方法 等 方面 进行 全 面 分析 。 通 过 分 析 
结果 设计 富有 创造 性 的 应 用 图 标 ， 避 免 视 觉 设 计 上 的 雷同 ， 形 成 差异 
化 设计 。 

( 3 ) 表意 准确 

局 动 图 标 意 义 表达 要 符合 应 用 的 特点 ， 使 用 户 通过 视觉 图标 了 解 应 用 
的 属性 、 功 能 甚至 操作 方法 。 避 人 免 出 现 启 动 图 标 与 应 用 实质 内 容 相差 甚 远 
的 问题 。 

( 4 ) 保持 与 应 用 中 视 鞠 元素 的 连续 性 

局 动 图 标 设计 可 以 是 应 用 中 界面 视觉 元 素 的 归纳 或 延续 ， 与 应 用 的 视 
说 界面 保持 一 定 的 连续 性 。 例 如 ，i0S 系统 中 的 原生 计算 器 应 用 就 将 界面 
中 加 减 磁 除 的 元 素 运 用 到 局 动 图 标 中 ， 不 仪表 意 明 确 ， 而 且 还 与 界 血 视 各 
元 素 你 持 了 一 定 的 连续 性 。 

(5) 唤起 用 户 的 好 琳 心 

将 启动 图 标 设计 得 有 趣 和 特别 能 贤 起 用 户 的 好 奇 心 ， 从 而 增加 应 用 的 
氮 击 率 。 例 如 ， 娱 乐 沉 浸 型 应 用 就 前 采用 色彩 与 图 案 特别 的 卡通 形象 图 标 
吸引 用 户 氮 击 和 下 载 应 用 。 

(6) 利用 品牌 特色 

看 是 基于 示 知 名 企业 平 合 或 为 示 知 名 品牌 设计 应 用 ， 可 以 直接 采用 瑟 
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们 的 品牌 形象 Logo 作为 主 视 党 元 素 进 行 设计 。 这 样 可 以 使 用 户 在 大 量 图 


标 中 轻松 找到 该 应 用 程序 ， 快 速 增加 应 用 的 点 击 率 并 说 得 一 定 的 市 场 份 


额 。 设 计时 要 将 应 用 特色 与 品牌 形象 进行 适当 结合 ， 并 与 该 品牌 其 他 应 用 
或 产品 进行 明显 的 视觉 差异 化 区 分 

( 7 ) 在 设备 中 预览 图 标 效 果 

当 启 动 图 标 设 计 完 成 后 ， 需 要 将 图 标 加 载 到 适 配 的 移动 设备 中 测试 
图 标的 预览 效果 。 根 据 测 斌 情况 对 图 标 进行 最 后 调整 ， 以 达到 最 佳 的 
视觉 效果 。 

8 ) 在 应 用 商城 中 测试 图 标 设计 的 质量 

由 于 图 标 存在 不 同 的 应 用 环境 ， 如 乎 果 公 司 有 iTunes 梨 面 商城 、 
iphone 手机 商城 、 订 ouch 商城 、ipad 平板 电脑 商城 ， 同 时 基于 计算 机 或 
移动 设备 屏幕 的 不 同 分 辨 率 其 显示 效果 也 存在 差异 ( 见 图 6-25 )。 因 此 ， 
设计 师 要 在 各 种 应 用 环境 中 测试 启动 图 标的 视觉 显示 效率 和 效果 ， 以 保证 
启动 图 标的 线 上 质量 。 
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6-22 ”局 动 图 标 所 在 的 应 用 商城 环境 


4. 移动 应 用 界面 图 标 设计 的 具体 万 法 


著名 图 标 设计 师 Susan Kare 说 : “好 的 图 标 应 该 是 在 同类 中 易 读 易 懂 
易 识 别 ， 而 不 是 在 说 明 解 释 ， 一 个 好 的 创意 应 该 以 清晰 、 简 明 、 给 人 印象 
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深刻 的 方式 表现 出 来 。 这 正如 视觉 与 交互 相互 反映 ， 交 互 设 计 的 既定 内 
容 需 要 通过 视觉 设计 加 以 修饰 和 完善 。 由 此 可 以 得 出 相对 于 图 标 表 层 的 外 
观 ， 图 标 最 本 质 的 功能 即 如 何 高 效 地 将 正确 的 信息 传达 给 用 户 。 尽 可 能 地 
减少 用 户 的 学 习 成 本 才 是 设计 师 需 要 真正 关注 的 问题 。 

图 标的 设计 需要 表意 明确 ， 并 具有 适合 的 隐喻 特征 。 首 先 ， 要 根据 对 
家 确定 图 标的 整体 风格 并 进行 概念 草图 绘制 ， 其 次 ， 在 草图 的 基础 上 给 图 
标 上 色 ， 设 计 图 标 适 合 的 角度 和 透视 ; 再 对 图 标 进行 细 和 调整 ， 以 去 现 图 
标的 质感 ; 最 后 ， 根 据 一 个 图 标 样 式 发 散 进 行 成 套图 标 设 计 ， 使 界面 内 的 
图 标 形成 统一 的 风格 。 有 形态、 色彩、 光影 、 材 质 与 布局 是 移动 应 用 界面 图 
标 设计 的 关键 因素 。 

(1 ) 形态 

移动 应 用 界面 图 标的 形态 阮 丰 富 又 具有 概括 性 。 形 态 是 定义 图 标的 大 
致 毗 廓 和 基本 社 式 。 为 了 使 用 户 更 容易 理解 和 接 爱 图标， 设计 形态 时 要 根 
韦 对 象 特征 进行 一 定 的 隐喻 ， 使 图 标 形态 贴近 用 户 的 认 央 沁 围 。 因 此 ， 图 
标的 形态 要 尽量 简洁 易 居 ,避免 过 度 使 用 象征 性 的 隐喻 符 志 ,， 用 简单 的 图 
形 作 为 整体 象征 性 的 代表 。 

(2) 色彩 

色彩 是 图 标 设计 的 一 个 重要 属性 ， 要 人 处理 好 图 标的 主要 颜色 与 次 要 闫 
色 之 间 的 天 系 ， 它 在 很 大 程度 上 决定 了 图 标的 最 终 视 况 效果。 不 同 的 颜色 
强 合 着 不 同 的 情感 意义 ， 因 此 设计 师 在 设计 手机 界面 图 标 时 要 基于 应 用 的 
功能 同时 遵循 用 户 的 心理 模型 ， 以 选择 合适 的 色彩 招 配 。 人 例如， 日历、 通 
讯 孙 这 类 代表 客观 事物 的 应 用 图 标 多 采用 绿色 、 灰 色 和 监 色 ， 而 一 坚 游 戏 
类 图 标 则 采用 给 人 市 来 愉快 心理 暗示 的 暖色 系 或 粉色 系 配色 。 上 此外， 成套 
图 标的 色彩 在 注意 区 分 界面 育 景色 的 基础 上 还 需 统 一 在 同类 色 系 的 视 竞 环 
境 中 ， 以 保持 界面 视觉 的 稳定 性 。 

( 3) 泡影 

用 户 在 实际 生活 中 看 到 的 物品 在 党 到 自然 区 线 和 物理 光线 的 影响 下 会 
呈现 立体 的 形态 ， 因 此 要 使 一 个 图 标 变 得 立体 就 需要 添加 光影 的 效果 。 设 
计 师 首先 要 将 图 标 想象 成 一 个 圆 形 的 球体 ， 通 过 定义 图 标的 素描 关系 ( 即 
光线 的 方向 ) 将 图 标 分 为 白 、 灰 、 黑 、 影 子 、 反 光 5 个 部 分 。 白 是 距离 区 
线 最 近 的 部 分 ， 是 图 标 最 腕 的 模块 ， 灰 是 白 与 黑 的 绥 冲 区 域 ， 起 到 柔和 过 
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渡 的 作用 ; 黑 是 图 标 中 颜色 最 重 的 部 分 ， 一 般 称 为 明暗 交界 线 ， 也 是 呈现 
图 标 体积 感 的 天 键 ， 影子 是 由 于 光线 不 能 穿 透 物体 而 形成 的 物体 的 投影 ， 
它 能 使 图 标 喝 加 真实 ; 反光 在 实际 生活 中 是 党 到 周边 环境 影响 的 反射 泡 
线 ， 因 此 它 能 使 图 标 看 起 来 更 加 真实 和 立体 。 随 看 设计 师 对 图 标 质感 细 展 
程度 的 追求 ， 图 标的 光影 层级 也 会 变 得 越 来 越 丰富 。 此 外 ， 设 计 师 还 需 注 
意 成 套图 标 中 光影 效果 尤其 是 角度 的 一 致 性 。 

(4) 材质 

从 视觉 传达 的 角度 来 看 ,手机 界面 图 标 所 体现 的 材质 感 是 指 其 模拟 真 
实物 体 所 呈现 的 丰富 视觉 效果 。 各 种 不 同 的 质感 为 图 标 设计 的 主题 表现 提 
供 了 更 多 可 能 的 形式 ， 同 时 也 提高 了 图 标的 可 视 性 。 例 如 ， 和 针对 一 些 科技 
软件 的 图 标 ， 会 采用 金属 拉丝 的 质感 效果 ; 针对 卡通 游戏 类 软件 的 图 标 ， 
会 用 水 晶 质 感 效果 。 

(5) 布局 

手机 界面 内 空间 的 布局 除了 影响 到 整体 界面 的 视觉 效 果 之 外 ,更 重要 
的 是 能 侣 让 用 户 准确 快速 地 进行 识别 和 操作 整体 界面 。 这 要 求 栗 面 育 景 和 
主要 图 标的 集合 以 菏 种 特定 的 主题 方式 加 以 展现 , 这 种 展现 不 仅 水 及 界面 
空间 中 图 标的 视 况 ， 也 水 及 图 标 与 图 标 、 图 标 与 育 景 之 间 的 联系 方式 。 因 
此 ， 单 个 图 标的 大 小 与 其 他 图 标 之 间 的 比例 关系 以 及 整体 图 标 排列 的 布局 
都 是 设计 图 标 时 应 该 考虑 到 的 问题 。 

移动 应 用 视觉 界面 中 图 标的 设计 要 扣 如 下 : 

易 识 别 。 图 标 内 容 需 表达 简洁 、 清 盯 ， 避 免 过 多 元 素 堆 积 。 设 计 
时 应 首先 考虑 怎样 使 图 标 传 违 玩 多 的 信息 而 不 会 增加 用 户 的 视觉 和 理解 负 
担 。 其 次 ， 图 标 在 界面 中 的 分 组 与 排列 也 很 重要 ， 相 似 功 能 的 图 标 尽量 排 
列 在 一 起 。 

@ 统一 性 。 保 持 图 标 中 元 素 表 达 的 一 致 性 和 连续 性 。 一 致 的 外 观 
与 感 况 可 以 在 软件 界面 中 创造 一 种 和 谐 。 如 采 异 面 图 标 缺 乏 一 致 性 ， 
则 很 可 能 引起 混 消 ， 并 使 界面 看 起 来 没有 条 理 。 由 于 图 标的 功能 各 
寞 ， 所 用 的 图 形 必定 不 同 ， 在 同一 软件 界面 里面 的 图 标 可 以 添加 共同 
元 素来 统一 风格 。 在 设计 图 标 时 ， 应 考虑 到 用 户 已 有 的 习惯 和 接受 能 
力 ， 最 好 调 伍 一 下 其 他 同类 软件 的 图 标 情况 ， 以 了 解 已 经 创建 了 什么 
标的 用 户 使 用 习惯 。 
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(3) 根据 目标 用 户 群 确定 图 标的 风格 。 设 计 图 标 前 一 定 要 考虑 清楚 
使 用 该 应 用 的 目标 用 户 特 点 ， 不 同 的 用 户 群 具备 不 同 的 认 知 特点 和 审 
美 情 趣 。 

由 构筑 合理 的 隐喻 。 设 计 师 在 构建 图 形 隐喻 时 ， 需 要 认真 考虑 所 指 
代 的 对 象 以 及 用 户 解码 后 可 能 产生 的 各 种 理解 、 图 标的 使 用 情景 、 与 其 他 
图 标 之 间 的 关系 ， 从 而 寻找 合适 的 喻 体 。 

(9) 设计 的 规范 。 图 标 中 图 形 的 设计 要 尽量 饱满 ， 充 分 利用 图 标的 
有 限 空 间 。 设 计 师 要 按照 不 同系 统 平 全 设计 规范 中 规定 的 图 标尺 寸 大 
小 进行 设计 。 图 6-23 所 示 是 苹果 i0S 系统 设计 规范 中 所 规定 的 图 标 设 
计 尺 寸 。 采 用 PNG 的 图 片 格式 ， 并 将 图 标 文 件 命 名 为 Icon.png， 置 于 
程序 的 资源 包 中 。 
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6-23 ” iPhone 界面 图 标的 规定 像素 矿 才 


( 资料 来 源 : www.uisdc.com ) 


6.3.4 ”阅读 体验 


移动 吾 联 网 和 移动 设备 的 普及 应 用 市 动 了 电子 阅读 市 场 的 发 展 。 各 类 
电子 书 、 电 子 来 忘 等 移动 阅读 类 应 用 纷纷 渭 入 人 们 的 日 前 生活 。 同 关 产 品 
的 可 选择 面 越 大 ， 用 户 对 于 阅读 类 应 用 的 期 每 也 越 高 。 因 此 ， 注 重文 字 选 
择 与 设计 、 强 调 信息 排版 、 提 升 阅 读 体验 、 减 分 用 户 的 认 知 负担 是 提升 阅 
读 体验 的 天 键 。 

(1 ) 文字 

文字 不 仅 可 以 作为 提示 或 辅助 性 的 标识 ， 还 可 以 显示 完整 信息 。 它 是 
移动 应 用 视 党 界 血 中 必 不 可 少 的 视觉 条 号， 文字 能 加 快 用 户 对 应 用 的 理 
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解 ， 提 高 用 户 使 用 应 用 时 的 效率 。 因 此 ， 在 移动 应 用 视觉 界面 中 ， 文 字 的 
选择 与 设计 是 一 个 不 可 忽视 的 环节 。 对 文字 的 编排 设计 在 社交 、 电 子 书 、 
新 闻 等 应 用 中 运用 较 多 。 

Q) 选择 与 设计 识别 性 高 的 显 屏 字体 。 

传统 的 PC 软件 自 带 字体 大 多 是 以 印刷 为 目的 。 它 们 在 设计 时 多 是 
以 取得 良好 的 印刷 效果 为 考量 ， 因 此 许多 字体 其 实 并 不 适合 屏幕 显 
示 。 即 使 是 文档 中 的 衬 丝 字 在 界面 的 阅读 体验 中 也 被 认为 是 让 人 分 心 
的 字体 。 

因此 ， 为 了 获得 良好 的 阅读 体验 ， 设 计 师 应 该 学 会 选择 和 使 用 基于 屏 
幕 显示 为 目的 而 开发 的 中 英文 字体 。 但 因为 不 同 设备 屏幕 技术 上 的 差异 
性 ， 设 计 师 在 选择 字体 时 还 需 更 加 谨慎 。 笔 者 通过 比较 研究 发 现 相 较 于 普 
通 计 算 机 ， 御 能 手机 显示 屏 的 对 比 度 和 亮度 更 高 ， 特 别 是 从 iPhone 4 开 
始 流行 的 Retina Display， 该 屏蔽 的 精度 比 一 般 手 机 屏 右 更 高 ， 这 使 条 些 
字体 的 细 笔 国 经 过 屏幕 泻 染 后 出 现 模 糊 不 清 的 问题 ， 影 响 了 用 户 的 阅读 体 
验 。 为 了 降低 技术 对 设计 的 困扰 ， 设 计 师 可 以 通过 加 大 一 号 文字 尺寸 来 强 
化 屏幕 对 文字 的 显示 效果 。 

@ 优化 阅读 体验 。 

文字 的 选择 与 设计 以 及 信息 文字 的 编排 对 满足 用 户 长 时 间 阅 读 的 需 
求 ， 给 用 户 提 供 阅读 流畅 的 沉浸 式 体 验 是 至 关 重 要 的 。 另 外 ， 字 体 的 大 
小 、 磅 数 、 行 间距 以 及 阅读 的 环境 等 都 是 影响 基于 移动 设备 屏幕 阅读 体验 
的 关键 因素 。 营 造 一 个 优秀 的 阅读 体验 是 界面 设计 师 的 责任 ， 也 是 以 用 户 
为 中 心 设 计 思 想 的 体现 。 

此 外 ， 设 计 师 在 组 织 文 案 信 息 时 需 表 达 简 洁 、 清 晰 ， 多 采用 一 些 用 户 
熟悉 的 词句 以 便于 用 户 理解 和 记忆 ， 重 点 文字 要 与 其 他 文字 进行 适当 的 区 
分 ， 如 加 粗 或 添加 边缘 光 等 。 

(2) 图 形 

由 于 移动 设备 的 屏幕 相对 PC 较 小 ， 因 此 用 户 可 阅读 的 一 屏 空间 也 上 略 
显 局 促 。 图 形 作 为 信息 时 代 传 播 信息 效率 较 高 的 一 种 方式 ， 可 以 有 效 解决 
用 户 在 移动 过 程 中 快速 理解 信息 的 问题 。 因 此 ， 可 以 将 简洁 的 图 形 元 素 和 
精炼 的 文字 整合 在 一 个 版 面 内 ， 这 种 方式 既 和 直观 易 懂 ， 又 能 避免 在 阅读 中 
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产生 歧义 。 此 外 ， 一 些 带 有 圆 角 特 征 的 图 形 或 圆 形 本 身 可 以 给 人 以 亲 和 
力 。 例 如 ， 在 一 些 移动 应 用 中 ， 可 以 看 到 许多 带 有 大 圆 角 或 圆 形 的 按钮 ， 
让 用 户 的 选择 变 得 专注 准确 ， 又 不 刻板 老 套 ( 见 图 6-24 ) 。 


Photo Quote 





(uk Video 





6-24 圆 形 图 标 


(3 ) 排版 

(DD 删 格 系统 。 寞 面 设 计 中 流行 的 栅 格 系统 最 早 应 用 于 平面 印刷 ( 纸 
媒介 ) 设计 ， 在 20 世纪 50 年 代 ， 随 看 瑞士 国际 主义 平面 设计 风格 的 盛 
行 ， 简 洁 而 理性 的 栅 格 系统 编排 设计 方法 在 印刷 出 版 行业 得 以 盛行 。 

随 着 互联 网 行业 的 发 展 ， 栅 格 化 设计 日 益 普 及 ， 尤 其 对 于 界面 多 栏 布 
局 ， 栅 格 用 来 保证 界面 内 容 结 构 的 平衡 和 层级 的 划分 。 

在 移动 界面 排版 设计 中 ， 随 着 Flipboard、zZaker 等 应 用 程序 的 出 
现 ， 借 鉴 杂 志 排 版 效果 的 信息 呈现 方式 逐渐 成 为 以 内 容 为 主导 的 应 用 
( 杂志 、 新 闻 、 书 籍 等 ) 所 采取 的 主流 形式 。 其 中 3x4 网 格 的 排版 应 用 
最 为 广泛 。 

@) 阅读 习惯 。 现 代 报 纸 版 面 之 父 德 蒙 阿 访 德 (Edmund Arnold ) 于 
20 世纪 50 年 代 创造 了 古 登 宝 图 。 他 将 一 个 页 面 分 为 4 个 部 分 ( 见 
6-25 ): 左上 骨 的 主观 区 、 石 下 角 的 终 挟 区 、 右 上 角 有 的 强 沉 溺 区 相左 
下 角 的 弱 沉 溺 区 。 用 户 的 阅读 重心 一 般 会 从 左上 角 的 主观 区 开始 ， 逐 
渐 问 外 萤 延 ， 并 最 终 停留 在 右 下 角 的 终点 区 。 与 此 同时 ， 用 户 在 中 轴 
线 以 上 ， 主 观 区 与 强 沉 溺 区 停留 的 时 间 最 长 。 而 弱 沉 溺 区 则 很 少 被 注 
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意 ， 除 非 在 视觉 上 有 额外 的 加 强 。 


强 沉 诗 区 


方位 中 轴线 





6-25 ” 德 蒙 阿诺德 ( Edmund Arnold ) 的 古 登 宝 图 


古 登 宝 图 的 理论 常见 于 网 页 设计 ， 如 网 页 中 最 重要 的 标题 、 文 字 、 链 
接 、 目 录 等 弟弟 出 现在 页 面 左 上 角 。 遵 循 该 理论 能 提高 阅读 效率 ， 提 升 用 
户 的 阅读 理解 能 力 。 但 这 桩 一 种 理论 并 非 适 用 所 有 信息 界面 的 排版 ， 必 须 
依据 具体 问题 进行 具体 分 析 。 

(3) 移动 应 用 界面 的 排版 。 在 本 书 6.3.2 万 中 曾 提 到 ， 移 动用 户 的 眼 
动 轨 迹 一 般 沿 看 子 苹 “L ”运动 ， 但 用 户 的 这 种 阅读 习惯 并 非 恒 定 不 变 ， 
当 页 面 或 整 员 文字 中 出 现 图 片 、 人 鲜艳 的 色 块 、 圆 形 符 号 、 箭 头等 视 况 元素 
时 ， 用 户 便 会 优先 阅读 这 些 鹃 引 他 们 的 事物 ， 阅 读 路 终 也 会 因此 而 改变 。 
不 仅 如 此 ， 用 户 的 阅读 视 终 还 会 受到 个 人 经 验 、 对 信息 及 巡 介 熟悉 程度 的 
影响 ， 从 而 形成 自己 特有 的 阅读 习惯 。 

移动 应 用 界面 的 排版 可 以 遵循 图 6-26 的 设计 思想 ， 将 最 核心 的 内 容 
放置 在 左上 角 ， 以 它 为 核心 从 左 至 石 、 从 上 至 下 依次 排 布 ( 由 重要 到 次 要 
依次 排 布 ) 其 他 人 信息。 同时， 设计 师 应 该 考虑 移动 用 户 的 阅读 习惯 ， 做 到 
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合理 引导 用 户 的 视线 ， 为 用 户 提 供 民 好 的 阅读 体验 。 


大 © 


强 沉 漳 区 


® 





图 6-26 ”移动 应 用 界面 的 排版 


(4) 页 和 面 背 景 

用 户 通过 手机 等 移动 设备 进行 阅读 活动 ， 屏 幕 的 反光 和 大 小 限制 容易 
使 用 户 感到 眼 部 疫 元 ， 阅 读 效率 也 会 因此 而 降低 。 因 此 ， 为 了 提升 用 户 阅 
旋 的 舒适 性 ， 页 面 育 景 不 提倡 采用 和 白色 或 其 他 明度 较 高 的 颜色 。 浅 灰色 、 
淡 黄 色 、 亚 态 色 等 比较 适合 用 作 页 面 的 背景 色 。 对 于 需要 用 户 长 时 间 沉 浸 
阅读 的 页 面 ， 在 背景 上 增加 纸张 纹理 的 效果 能 缓解 用 户 的 眼 部 疲劳 ， 优 化 
阅读 体验 。 

(5) 动态 数据 可 视 化 

维基 百科 认为 数据 可 视 化 主要 指 借 助 于 图 形 化 手段 ， 清 晰 有 效 地 传达 
与 沟通 人 信息。 因此， 数据 可 视 化 设计 需要 将 复杂 的 文字 与 数据 信息 及 其 
逻辑 关系 通过 直观 的 遍 形 图 、 柱 状 图 等 丰富 的 图 形 元 素 表 现 出 来 ， 以 提 
高 阅读 体验 。 当 前 数据 可 视 化 呈现 的 方式 逐渐 从 静态 发 展 为 带 有 交互 方 
式 的 动态 数据 可 视 化 。 动 态 数据 可 视 化 可 以 与 用 户 形 成 互动 ,能够 实时 
地 、 多 维度 地 显示 动态 数据 的 状态 ， 从 而 提高 数据 表现 的 趣味 性 和 准确 
性 ( 见 图 6-27 ) 。 
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6-27 Misf 计 用 户 数据 可 视 化 


6.3.5 和信 场 界面 


入 场 寞 向 是 用 米 蔡 代 系 统 后 全 运行 复杂 代码 的 常见 方式 ， 是 用 视 党 表 
现 模型 掩盖 实现 模型 焉 站 的 一 种 设计 方法 。 

移动 应 用 入 场 界 向 主要 包括 三 种 形式 : 动态 内 屏 ( 每 次 开局 应 用 者 会 
出 现 ) 、 静 态 内 屏 ( 每 次 开局 应 用 都 会 出 现 ) 、 引 导 页 ( 仅 第 一 次 开局 应 
用 或 更 新 应 用 时 出 现 ) ， 其 交互 形式 既 有 动态 的 又 有 静态 的 ， 但 界面 中 具 
体 需 呈现 的 内 容 ， 还 要 进行 精细 化 的 视 竟 设计。 入 场 界面 内 容 一 般 围绕 应 
用 内 涵 或 品牌 价值 而 设计 。 

其 中 ， 引 导 页 对 用 户 了 解 移动 应 用 核心 功能 起 到 了 快速 引导 的 作用 ， 
能 够 帮助 用 户 快 速 掌 握 应 用 的 基本 使 用 方法 ， 激 起 用 户 对 功能 的 尝试 欲 
望 。 它 的 主要 表现 形式 包括 前 态 膏 明 ( 图 片 配 合 文 字 ) 、 动 态 演示 ( 动 辆 
或 视频 ) 、 半 透明 氨 章 图 示 ( 在 应 用 由 和 面 之 上 和 直接 图 示 说 明 ) 、 图 层 革 加 
式 半 动 态 说 明 ( 通过 大 异 性 设置 页 面 中 多 个 图 层 的 位 置 和 频率 ， 达 到 页 面 
中 销 落 有 致 的 视 帝 效果 ) 。 

引导 页 设计 需要 遵循 以 下 几 个 原则 : 
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Q) 页 面 中 呈现 的 内 容 要 符合 应 用 的 整体 风格 和 概念 ， 多 运用 具有 亲 
和 力 和 情感 化 的 设计 来 表现 页 面 内 容 。 





J 
中 

页 向 中 的 图 文 表达 要 简明 扼要 、 主 次 清晰 ， 切 尽 用 过 多 文字 说 明 

页 面 内 容 ， 尽 量 采 用 简洁 的 图 示 进 行 说 明 ( 见 图 6-28 ) 。 


全 新 MV 特效 来 区 ， et 


:EE 


NE Sb ANMNA, 


10 秒 也 能 拍 大 上 


图 6-28 美 拍 引导 页 视觉 设计 


(8) 把 握 页 面 之 间 的 节奏 ， 通 过 一 种 渐进 式 的 阅读 体验 ， 将 用 户 慢 慢 
带 入 应 用 程序 之 中 。 

由 页 面 数量 尽量 不 超过 4 张 。 

闪 屏 一 般 采 用 简洁 的 色彩 、 文 字 、Logo 和 图 像 快速 表达 应 用 的 核心 
理念 ， 并 采用 和 哲 事 的 方式 深入 用 户 的 内 心 世 界 。 

新 浪人 微 博 2013 年 年 初 内 屏 设 计 ， 将 画面 主题 定 为 微 博 拉 近 你 我 ， 温 
瞬 一 冬 ， 如 图 6-35 所 示 。 男 和 面 中 一 个 人 打 着 一 把 心 形 红 全 在 雪 地 里 漫步 
的 故事 情境 表达 了 该 主题 的 含义 一 一 即使 在 下 着 雪 的 寒冬 里 ， 用 户 仍然 可 
以 通过 新 浪人 向 博 给 对 方 传递 歇 暖 的 情意 。 有 界面 中 重点 突出 了 主题 标语 和 新 
浪 微 博 的 Lo0g0， 标 语文 案 作为 一 种 品牌 营销 手段 与 用 户 产 生 情 感 上 的 共 
鸣 ， 侧 Logo 主要 突显 品牌 形象 。 

当然 ， 闪 屏 视 党 设计 并 非 一 成 不 变 ， 随 看 应 用 版 本 和 运营 需求 的 变 
化 ， 闪 屏 也 可 以 给 用 户 带 来 焕然 一 新 的 感受 ， 如 围绕 季节 、 气 候 、 节 
日 、 重 大 事件 、 品 牌 形象 提升 等 进行 设计 。 不 同 应 用 的 闪 屏 设计 如 图 6-30 
所 示 。 
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于 果 公 司 最 新 的 i0S 8 人 机 界面 指南 指出 ， 用 户 往 往 不 会 花费 超过 一 
两 分 钟 的 时 间 去 审视 一 个 新 应 用 ， 知 将 应 用 从 打开 到 局 动 的 时 间 压 缩 得 很 
短 ， 并 同时 在 载 入 过 程 中 呈现 一 些 对 用 户 有 帮助 的 内 容 ， 则 该 应 用 就 能 激 
发 用 户 的 兴趣 并 市 给 用 户 惊 襄 。 新 指南 认为 应 该 尽量 避免 使 用 入 场 界 面 ， 
让 用 户 直 接 进 入 应 用 是 最 好 的 选择 。 因 此 ， 可 以 在 局 动 应 用 时 ， 调 用 一 张 
与 应 用 起 始 页 相同 的 图 片 ， 这 样 可 以 让 用 户 感觉 启动 速度 很 快 。 

移动 应 用 入 场 界 面 的 设计 要 点 如 下 . 

(D 尽量 保持 简洁 的 界面 风格 ， 避 人 免 过 多 的 引导 信息 展示 页 面 ， 从 而 
造成 不 必要 的 心理 负担 。 

@) 尽量 使 入 场 界 面 有 和 意义， 避免 出 现 不 必要 的 内 容 或 元 素 。 

(38) 根据 目标 用 户 的 特点 ， 使 入 场 界 面 贴 近 用 户 的 审美 情趣 ， 符 合用 
户 的 心理 预期 。 

由 界面 中 的 文案 要 简洁 ， 围 绕 应 用 属性 与 所 要 传达 的 主题 进行 表 
述 ， 减 少 用 户 的 思考 时 间 。 

(6) 可 以 加 入 一 定 的 动画 效果 ， 使 界面 的 视觉 效果 更 加 丰富 ， 更 具 视 
区 冲 击 力 。 


6.4 小 结 


本 章 从 效率 与 设计 美学 的 关系 、 基 于 效率 的 移动 视觉 设计 美学 的 发 展 
历程 入 手 ， 熙 在 符号 学 、 格 陈 欣 心理 学 的 视角 诠释 了 移动 应 用 界面 视 帝 设 
计 的 基本 理论 。 视 帝 设 计 是 整个 移动 应 用 界面 设计 知识 体系 中 的 表现 层 内 
容 。 应 用 界面 的 视觉 设计 应 当 具 有 民 好 的 隐喻 性 ， 在 整体 的 视觉 风格 下 突 
出 重点 ， 并 符合 用 户 的 心理 模型 ， 同 时 为 了 满足 用 户 的 控制 欲 可 以 给 用 户 
增加 上 自 定义 选项 ， 以 满足 用 户 的 个 性 化 需求 。 

移动 应 用 界面 的 视 况 设计 不 仅 需 要 从 安 观 上 把 握 好 界 血 的 主题 、 色 
彩 、 导 航 、 布 局 ， 还 要 从 微观 上 处 理 好 图 标 、 控 件 等 细 呈 要 素 。 其 中 ， 图 
标 设计 是 应 用 界面 视 帝 设计 的 关键 ， 设计 师 需 要 处 理 好 图 标的 功能 隐喻 
性 、 易 识别 性 受 视 涡 懈 居 性 三 者 之 间 的 关系 。 
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7.1 ] 谷子 烟 化 服务 设计 平 全 


(1 ) 项 目 简介 

项 目 名 称 : 烟花 先生 一 一 基于 iphone 的 数字 烟花 服务 设计 平 合 
( Mr.Boom — Digital Fireworks Sevice Design for iphone )。 

项 目 简介 : 该 项 目 为 作者 参与 设计 的 一 款 基 于 iphone 手机 的 数字 烟 
人 花 服 务 平 侣 应 用 ( 该 作品 为 2012 年 第 三 届 关 营 杯 国际 工业 设计 创新 大 赛 
优秀 奖 作 品 ) 。Mr.Boom 数字 烟 化 服务 平 合 致力 于 拓展 传统 烟 化 行业 的 服 
务 领 域 、 提 高 服务 质量 ， 主 要 针对 企业 、 家 庭 及 个 人 的 庆祝 活动 的 个 性 化 
订 制 需求 ， 适 用 于 室内 、 室 外 低空 环境 的 中 小 型 规模 庆典 ( 市 日 、 婚 庆 、 
脐 会 等 J 

( 2 ) 商业 模式 

如 图 7-1 所 示 ， 数 字 烟 花 服务 设计 平 侣 应 用 由 玫 机 应 用 软件 与 牧 能 
数字 烟花 燃放 投影 仪 两 部 分 组 成 ( 智能 投影 仪 概念 已 经 设计 完成 )。 
此 ， 该 应 用 的 鱼 利 模式 主要 分 为 两 个 大 的 模块 : 烟花 制作 责 用 和 投影 设备 
租赁 费用 。 烟 花 制 作 费 用 模块 可 以 通过 用 户 DIY 烟花 、 系 统 推荐 烟花 、 用 
友 推 荐 烟花 与 寞 面 广告 4 个 渠道 进行 鳃 利 ， 而 投影 设备 租赁 的 具体 费用 
会 根据 用 户 租 质 的 具体 天 数 在 烟花 定制 完 侍 后 一 并 呈现 在 订单 中 。 
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7 一 ] Mr.Boom 商业 模式 








ee 
) 设计 触发 点 。 

人 们 有 大 的 节日、 活动 六 中 外 所 共 的 习 从 但 无 论 在 城市 
还 是 乡村 ， 燃 放 烟 花 均 会 造成 许多 负面 的 影响 : 山 不 仪 会 hm 
污染 ， 燃 放 烟 花 时 所 释放 的 气体 ( 二 氧化 硫 、 一 氧化 氨 、 二 氧化 氮 等 ) 
会 引发 酸雨 等 严重 的 环境 污染 问题 ， 而 弥漫 在 空气 se 
呼吸 系统 产生 不 利 影响 ， 从 而 引发 慢性 疾病 ， 加 未 熄灭 的 烟花 火苗 极 易 引 
燃 树木 花草 ， 最 终 导致 火灾 而 影响 人 们 的 生命 财产 安全 。 

2 ) 设计 切入 民 必 

为 了 提倡 更 加 文明 和 环保 的 烟花 燃放 方法 ， 模 拟 真 实 烟花 燃放 的 数字 
烟花 概念 应 运 而 生 。 现 有 的 数字 烟花 产品 多 为 大 型 的 机 械 或 投影 仪 产 品 ， 
不 仅 操 作 复杂 ， 而 且 也 不 适合 家 庭 及 个 人 用 户 的 人 使用。 因此， 设计 团队 考 
虑 将 数字 烟花 的 概念 移植 到 iphone 应 用 中 ， 并 鼓励 和 引导 人 们 多 使 用 数 
字 烟 花 以 保护 环境 。 与 此 同时 ， 数 字 烟 花 应 用 还 与 实体 的 虚拟 烟花 燃放 投 
影 设 备 结合 使 用 ， 使 其 成 为 一 个 完整 的 数字 烟花 服务 体系 。 

另外 ， 通 过 对 相关 竞 品 的 调研 分 析 ， 得 出 数字 烟花 的 应 用 按 功能 主要 
分 为 烟花 欣赏 和 烟花 游戏 两 种 类 型 。 

烟花 欣赏 应 用 中 有 烟花 图 片 欣 赏 和 烟花 动画 效果 欣赏 两 种 功能 类 型 。 
烟花 图 片 欣 党 应 用 支持 用 户 通 过 扩 击 屏 硕 切换 不 同 的 烟 伦 图 厂 。 烟 花 动画 
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效果 欣赏 应 用 与 图 片 欣 赏 应 用 类 似 ， 差 别 主 要 在 于 用 户 能 观赏 烟花 燃放 
的 动态 效果 。 由 于 这 类 应 用 的 功能 比较 单一 ， 所 以 其 下 载 量 小 ， 用 户 也 
bE RD 

烟花 游戏 应 用 分 为 烟花 贸 卡 、 烟 花 制 作 、 烟 花 小 游戏 三 种 功能 类 型 。 
烟花 痪 卡 文 持 用 户 选 择 预 设 的 烟花 效果 配合 育 景 、 文 字 、 音 效 等 内 容 ， 制 
作成 为 融 卡 后 通过 邮件 等 形式 发 送 给 好 友 。 例 如 ，Fil the Sky 应 用 就 采 
用 虚拟 现实 的 技术 ， 将 真实 的 背景 与 虚拟 的 烟花 配合 起 来 ， 使 用 户 能 通过 
担 照 输出 烟花 合成 的 图 片 。 烟 化 制作 是 一 种 文 持 用 户 DIY 组 合 和 编辑 烟花 
的 应 用 类 型 ， 如 Firework Builder 应 用 为 用 户 提 供 了 烟花 样式 、 烟 花 颜 
色 、 育 景 普 泉 与 背景 图 瞩 4 项 编辑 项 目 ， 用 户 可 以 选择 喜欢 的 烟花 样式 
并 调试 烟花 的 颜色 。 烟 花 小 游戏 则 是 将 烟花 作为 游戏 的 主题 或 工具 的 一 种 
况 遂 五 洲 戏 应 用 。 

Mr.Boom 团队 成 员 依 据 以 用 户 为 中 心 的 思想 ， 针 对 初步 设 定 的 用 户 模 
型 确定 目标 用 户 群 体 并 采用 问卷 调查 的 研究 方法 ， 总 结 出 以 上 两 类 应 用 
的 问题 : 中 烟花 视听 效果 生硬 ， 操 作 方 式 单调 ， 很 难 吸 引用 户 持续 使 
用 ; @ 大 多 数 应 用 都 停留 在 娱乐 用 户 的 层面 ; 地 应 用 缺乏 对 用 户 的 正面 
引导 意义 。 

用 

烟花 先生 ( Mr.Boom ) 是 一 款 基 于 iphone 的 数字 烟花 服务 平台 应 用 。 
Boom 是 烟花 在 空中 爆炸 的 拟 声 词 ， 团 队 成 员 在 结合 了 应 用 娱乐 性 的 特 所 
后 决定 采用 拟人 化 的 Mr.Boom 作为 应 用 的 名 字 。 

Mr.Boom 利用 3D 全 息 投 影 技 术 数 字模 拟 烟 花 燃放 的 效果 ， 在 为 喜庆 
助兴 、 苔 造 温 志 浪漫 氛围 的 同时 ， 有 效 减 少 了 传统 烟花 燃放 对 大 气 环 境 造 
成 的 污染 ， 更 避免 了 人 身 安全 事故 的 发 生 。 

产品 特色 : 中 拥有 完善 的 服务 模式 与 商业 鳃 利 模式 ; (具有 人 性 化 的 
移动 终 冰 App 订 制 及 使 用 流程 ; 他 享有 轻松 便捷 的 数字 烟花 全 息 投 影 机 
租赁 服务 。 

4 ) 设计 验证 。 

设计 团队 采用 头脑 风暴 法 和 六 顶 帽 子 法 对 产品 概念 进行 发 散 ， 从 用 
户 、 产 品 、 环 境 、 时 间 、 原 因 、 方 式 和 价值 7 个 方面 对 产品 概念 进行 
验证 。 
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用 户 ( Who): td 家 寿 或 个 人 用 户 。 


产品 ( What )， 用 户 通 过 使 用 数字 烟花 应 用 及 投影 设备 达到 欣赏 烟花 
的 感官 满足 。 

环境 ( Where ): 适合 在 室内 外 低空 环境 的 中 小 型 规模 庆典 中 使 用 ， 如 
是 

时 间 ( When ): 适合 在 夜晚 使 用 。 


原因 ( Why )， 也 该 应 用 能 有 效 地 规避 燃放 实体 烟花 发 生 的 种 种 问题 ; 
数字 烟 伦 的 使 用 更 加 方便 和 和 安全， 用 户 能 根据 自己 的 喜好 定制 烟花 样 
到， 让 操作 的 本 

方式 ( How ): 能 够 通过 平 果 应 用 商城 下 载 此 款 应 用 ， 并 通过 租 侍 
oo， 

价值 ( Value ): 该 应 用 的 推广 能 逐步 减少 因为 燃放 烟花 而 导致 的 各 
安全 事故 ， 减 少 烟花 燃放 物质 对 大 气 和 环境 的 负 影响 ， 唤 起 人 们 保护 自 
然 环境 和 生命 安全 的 意识 。 

(4 ) 策略 制定 

根据 上 述 用 户 因素 结合 市 场 与 竞争 力 的 分 析 ， 可 以 得 出 Mr.Boom 的 核 
心 功能 是 iPhone 应 用 结合 数字 烟花 投影 设备 为 目标 用 户 提 供 定 制 及 投放 
数字 烟花 的 服务 ， 其 他 主要 功能 还 包 后 通过 应 用 控制 和 调和 万 数字 烟花 投影 
设备 以 及 应 用 系统 推荐 烟花 样式 及 订单 查询 等 服务 。 因 此 ， 产 品 的 主要 功 
能 都 需要 通过 应 用 界面 来 体现 。 由 于 市 场 上 暂 未 出 现 与 该 应 用 概念 相似 的 
应 用 ， 因 此 从 设计 策略 的 角度 考虑 ， 可 以 将 应 用 投放 到 市 场 的 时 间 尽 可 能 
提前 ， 和 争取 比 竞争 对 手 更 早 进 入 市 场 以 获得 市 场 优势 。 本 案例 Mr.Boom 属 
于 概念 产品 ， 应 用 中 所 涉及 的 技术 ( 投影 设备 技术 等 ) 还 处 于 研发 阶段 ， 
J 所 以 完整 的 产品 生命 周期 策略 还 有 待 进 一 步 完善 。 

) 用 户 模 型 评估 

ee 
及 他 们 对 传统 烟花 和 数字 烟花 的 看 法 进行 了 调研 活动 ， 具 体 绪 论 如 下 : 

目标 用 户 群 的 主要 特征 ， 了 喜欢 热 闸 ， 对 事物 的 决策 比较 主观 ， 行 动 
力 通 ; 包 在 需求 层次 上 有 较 高 追求 ， 不 满足 于 现状 ， 提 倡 时 疝 环 保 的 生活 
困 

目标 用 户 群 对 传统 烟花 的 看 法 : 了 烟花 的 啊 声 相 火 花 能 高 意 红 红火 
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火 ， 为 来 年 开 个 好 彩 头 ， 忆 对 烟花 质量 不 太 信 任 ， 比 较 担 心 发 生意 外 ，; 
(3 烟花 对 环境 造成 了 一 定 污染 。 

目标 用 户 群 对 数字 烟花 的 看 法 : 由布 望 数 子 烟 花 的 效果 能 接近 实体 烟 
化 效果 ; 包 应 用 中 烟花 的 购买 方式 要 避免 复杂 ， 价 格 适 中 为 好 ; 岛 知 能 加 
入 一 些 个 性 化 定制 的 元 素 将 会 更 愿 意 使 用 。 

(6) 人 物 角 色 模 型 

应 用 开发 团队 在 用 户 模 型 的 研究 基础 上 设 定 了 人 物 角 色 模 型 ， 具体 结 
论 如 下 。 

姓名 : 王 远 富 


年 龄 : 40 
性 别 : 男 
星座 : 双鱼 


职业 : 私营 业主 

所 在 城市 ， 上海 

爱好 : 羽毛 球 、 骑 马 、 东 亏 

性 格 : 乐观 、 竖 弥 

候 惧 的 事物 : 家 人 史 到 麻烦 

教育 月 景 : 六 学 本 科 

家 庭 情 况 : 父母 、 弟 弟 、 妻 子 、 廊 儿 

婚姻 情况 : 已 婚 

燃放 传统 烟花 的 情况 每 着 过 年 会 购买 传统 烟花 ， 并 驱车 载 着 家 人 到 
城市 郊区 燃放 烟花 。 

对 数字 烟花 的 看 法 既 安 全 又 环保 ， 愿 意 进行 尝试 。 

(7) 界面 任务 模型 

根据 设计 策略 与 用 户 模型 的 研究 成 果 ， 团 队 成 员 将 用 户 任 务 分 解 为 以 
人 

结合 产品 设计 策略 中 的 商业 模式 与 运营 的 需要 ， 应 用 界面 中 要 出 
现 系统 智能 推荐 烟花 的 相关 内 容 。 

@ 为 了 满足 用 户 个 性 化 定制 烟花 的 需求 ， 异 面 中 需要 出 现 烟 花样 
式 、 文 字 、 色 彩 、 育 景 等 诸多 选项 ， 以 优 用 户 进行 调试 。 

(8) 购买 烟花 的 按钮 最 好 出 现在 任何 烟花 查看 界面 ， 以 方便 用 户 随时 
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进行 订购 活动 ， 同 时 也 要 方便 用 户 与 朋友 进行 及 时 的 分 享 。 

(4) 用 户 的 购买 记录 要 提供 明显 入 口供 用 户 便 看。 

(5) 数字 烟 化 需要 通 ee 放 效 果 ， 因 此 移动 
ee 

界 碳 信息 染 构 

ee 12 所 示 ，Mr.Boom 主要 采用 浅 而 窜 的 信息 架构 方式 ， 在 规定 信 
息 宽 上 度 的 基础 上 进行 深度 延伸 ， 宽 度 与 深度 中 清晰 和 简洁 的 信息 能 方便 用 
户 快 速 认 知 与 记忆 并 最 终 达 到 目标 。 


Ee 










推荐 产 


DIY es 2 消息 - A 


nr 
IERT me 


ETRT TIE 
pL a Fr 











有 


保存 /预定 /分 享 


图 7-2 Mr.Boom 信息 架构 图 


根据 设 定 好 的 界面 任务 模型 ， 应 用 主要 分 为 推荐 产品 、DIY 烟花 、 我 
的 收藏 、 消 息 盒 a a ni 


ee 划 记 L、 派 对 、 
等 ) 和 最 热门 的 烟花 分 别 智能 推荐 给 用 户 ， et 看 烟花 详 
Le 户 个 性 化 定制 烟花 的 各 项 属 


ee 
三 种 任务 在 一 个 界面 中 呈 次 序 关 系 ， 同 一 时 间 只 能 有 一 个 任务 执行 。 当 用 
i 面 与 DIY 烟花 界面 点 击 收 藏 后 ， 收 藏 的 产品 均 能 在 我 的 收 

界面 中 进行 查看 ， 同 时 应 用 还 提供 了 一 键 式 订购 与 分 享 的 功能 ， 方 便 用 
ee 及 商家 反馈 的 界 ne EE 
影 设 备 控制 功能 可 以 方便 用 户 控 制 投 影 设 备 的 开关 、 播 放 及 其 进度 、 
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及 其 角度 。 

(9 ) 界面 流程 图 分 析 

基于 易 用 性 原则 以 及 目标 用 户 群 对 订购 数字 烟花 操作 的 简易 化 需求 ， 
Mr.Boom 应 用 界面 主要 采用 渐进 式 交 互 与 往复 交互 的 形式 。 渐 进 式 交互 是 
用 户 通过 线性 的 流程 一 步 一 步 地 完成 每 一 项 操作 ， 往 复 交 互 则 主要 涉及 用 
户 返 回 到 前 一 页 及 返回 到 主 界 面 的 动作 流程 。 应 用 系统 采用 往复 交互 形式 
能 使 用 户 在 每 一 个 界面 都 可 以 轻松 地 返回 到 上 一 页 或 进入 下 一 页 。 

局 动 应 用 后 ， 新 手 用 户 可 选择 以 游客 身份 进入 或 注册 新 用 户 ， 以 游客 
号 份 进入 应 用 的 用 户 只 能 浏览 应 用 中 与 烟花 相关 的 信息 ， 无 法 进行 购买 等 
具体 活动 。 已 经 注册 成 功 的 用 户 下 次 进入 该 应 用 便 能 直接 登录 应 用 的 主 界 
面 。 用 户 进入 主 界面 后 能 自行 选择 设置 、 帮 助 、 推 荐 产品 、DIY 烟花 、 我 
的 收藏 、 消 息 盒 子 、 投 影 设 备 控 制 中 任何 一 个 功能 按钮 进入 相应 的 次 级 界 
面 ( 见 图 7-3 )。 

( 10 ) 界面 导航 分 析 

根据 信息 架构 与 流程 图 设计 ，Mr.Boom 应 用 的 主 界面 需要 为 用 户 提 供 
推荐 产品 、DIY 烟花 、 我 的 收藏 、 消 息 盒子 与 投影 控制 设备 5 个 功能 导航 
入口， 同时 还 要 结合 设计 策略 加 入 广告 运 萌 的 内 容 。 因 此 ， 应 用 主 界 面 采 
用 人 入口 导 航 中 五 宫 格 导航 的 形式 ， 并 将 界面 中 上 下 两 个 模块 利用 起 来 ， 上 
部 区 域 用 来 展示 应 用 的 名 称 ， 下 部 区 域 用 来 显示 推荐 广告 。 由 于 中 间 导 航 
区 域 中 的 推荐 产品 与 DIY 烟花 是 用 户 强 需 求 的 功能 ， 也 是 应 用 中 最 重要 的 
两 个 功能 ， 因 此 将 两 者 在 导航 中 的 区 域 设 计 得 最 大 ， 以 方便 用 户 点 击 。 

界面 中 其 他 5 类 子 导 航 均 根据 不 同 的 内 容 属性 和 用 户 的 操作 习惯 及 用 
不 同 的 导航 形式 。 例 如 ， 推 荐 产品 界面 主要 及 用 标签 导航 ， 用 以 切换 情境 
与 最 热 两 个 产品 分 类 。 每 一 个 产品 分 类 界面 则 及 用 入 口 导 航 中 十 二 富 格 导 
航 显 示 产 品 的 缩 略图， 用 户 可 以 通过 点 击 缩 略 图 进入 产品 的 详情 界面 。 同 
时 ， 产 品 又 能 使 用 标签 导航 中 旋转 的 形式 左 石 切换 不 同 界 面 的 产品 缩 略 
图 。DIY 烟花 界面 主要 采用 标签 导航 的 形式 调 太 烟花 与 文字 效果 ， 其 他 项 
目 均 以 供用 户 选 择 的 条 目 存 在 于 界面 中 。 消 居 盒 子 与 我 的 收藏 的 寞 面 导 航 
主要 以 列表 形式 导航 显示 具体 信息 ， 控 制 设备 界 矿 导航 则 用 于 工具 操作 ， 
属于 全 屏 导 航 的 沁 畴 ( 见 图 7-4 )。 
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7-3 Mr.Boom 信息 流程 图 
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( 11 ) 界面 视觉 设计 

Mr.Boom 界面 视 况 设计 在 分 析 用 户 认 知 与 心理 模型 的 基础 上 ， 通 过 运 
用 色彩 心理 学 、 图 标 隐喻 性 、 信 息 视 党 可 视 化 等 原理 从 界面 主题 、 色 彩 、 
图 标 、 导 航 与 布局 、 入 场 界 面 和 动 效 这 6 个 方面 开展 界面 视 涡 设计 ， 具 体 
内 容 如 下 : 

由 主题 : 团队 成 员 结合 应 用 功能 属性 的 特点 ， 将 烟花 在 空中 绽放 的 
概念 作为 界面 视觉 设计 的 主题 。 界 面 通过 运用 绚丽 的 光线 、 火 焰 以 及 其 他 
动态 的 界面 元 素 表 达 烟 花 绽 放 的 情境 ， 以 帮助 用 户 理解 应 用 的 含义 并 增加 
在 同类 应 用 中 的 辨识 度 。 

@) 色彩 : 根据 用 户 模 型 的 评估 结果 ， 该 应 用 的 目标 用 户 喜 爱 热 闹 欢 
快 的 环境 ， 而 烟花 进发 到 空中 的 色彩 也 是 五 彩 斑 澜 的 ， 因 此 界面 采用 上 暖色 
系 、 饮 和 度 较 高 的 色彩 能 更 得 合用 户 的 心理 模型 ， 带 给 用 户 以 愉悦 感 。 基 
于 上 述 分 析 ， 团 队 采 用 了 亮 黄 色 作 为 界面 的 主要 色 系 ， 并 搭配 了 含 暖 的 绿 
色 和 中 性 的 灰色 作为 辅助 色 以 区 分 界面 元 素 的 不 同 层次 关系 ， 从 而 提高 
户 操作 的 效率 。 

(3) 图 标 : Mr.Boom 的 图 标 设计 主要 分 为 三 种 : 局 动 岁 标 、 界 面 一 级 
图 标 、 界 面 二 级 图 标 。 启 动 图 标 以 Mr.Boom 的 英文 名 字 为 主要 元 素 ， 并 结 
合 发 散 和 抽象 的 色彩 线条 表现 烟花 绽放 的 情境 ， 使 其 在 同类 应 用 局 动 图 标 
中 更 加 显眼 。 有 界面 一 级 岁 标 分 别 表 示 界 面 最 主要 的 功能 : 推荐 产品 、DIY 
烟花 、 我 的 收藏 、 消 恩 盒 子 和 投影 设备 控制 。 界 面 二 级 图 标 用 来 表现 应 用 
中 的 二 级 功能 或 次 要 功能 。 在 应 用 中 ， 界 面 一 级 图 标 均 位 于 主 界面 中 ， 以 
方便 用 户 轻 松 点 击 进入 任何 功能 界面 。 

其 中 ， 推 荐 产品 图 标 形象 地 表现 了 推荐 产品 中 的 4 种 类 型 : DIY 烟花 
图 标 将 用 户 自 定义 烟花 的 功能 隐喻 成 用 户 变 魔术 的 过 程 ， 我 的 收藏 来 用 简 
洁 的 爱心 图 案 来 表示 用 户 自 己 喜 爱 的 产品 ; 消息 盒子 用 信封 体现 信息 的 沟 
通 ; 投影 设备 控制 功能 则 将 人 们 调试 某 种 设备 的 动作 隐喻 成 用 户 控制 设备 
的 行为 ( 见 图 7-5 ) 。 





小 设计 大 思维 一 一 移动 应 用 界面 的 设计 万 法 与 实践 





7-5 Mr.Boom 图 标 设计 


由 导航 与 布局 : Mr.Boom 将 界面 导航 与 背景 进行 了 明显 的 视觉 化 
区 分 ， 使 操作 区 域 与 显示 区 域 一 目 了 然 。 与 具体 操作 相关 的 界面 以 及 
由 九 富 格 变化 而 来 的 导航 都 采用 了 居中 对 齐 的 形式 ， 而 其 他 的 界面 导 
航 则 采用 了 左 对 齐 的 形式 ， 以 方便 用 户 阅 读 与 操作 。 设 计 师 还 将 界面 
中 的 按钮 表现 包含 有 触发 效果 ， 采 用 视觉 突出 的 方式 暗示 用 户 可 以 通 
过 点 击 完成 任务 。 由 于 该 案例 是 基于 ;iphone 的 应 用 界面 ， 因 此 界面 
中 的 状态 栏 、 导 航 栏 、 中 间 内 容 、 标 签 栏 和 工具 栏 都 需要 遵循 i0S 系 
统 的 界面 布局 特点 。 例 如 ， 界 面 上 半 部 分 用 来 显示 重要 信息 ， 界 面 下 
半 部 分 用 来 显示 与 用 户 行为 相关 的 操作 信息 ， 并 将 返回 或 主页 按钮 放 
置 于 界面 左上 方 如 图 7-6 和 图 7-7 所 示 。 
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7-6 Mr.Boom 的 不 同 控 件 状态 
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7 一 7 Mr.Boom 的 主要 视觉 界面 


GG) 入 场 界面 ， 如 图 7-8 所 示 ， 
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功能 则 采用 手绘 的 方式 告知 用 户 其 具体 的 功能 与 操作 方 陈 。 
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Di Fire “二 
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7-8 Mr.Boom 的 入 场 界面 


(@) 动 效 : 如 图 7-9 所 示 ，Mr.Boom 的 动 效 设计 主要 集中 在 界面 切换 
与 动作 执行 中 。 例 如 ， 当 用 户 点 击 订购 烟花 的 按钮 后 ， a 
个 提示 窗口 控件 提示 用 户 下 一 步 的 操作 ， 用 户 能 基于 这 人 
作 下 去 ， 以 完成 烟花 订购 程序 。 
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72| 个 人 擎 上 车 官 应 用 


(1) 项 目 简介 

项 目 名 称 : 杭州 车 党 所 应 用 一 一 杭州 党 上 车 管 。 

项 目 简介 : 该 项 目 为 作者 参与 设计 的 一 款 手机 掌上 车 管 所 应 用 。 

“杭州 掌上 车 管 ” 是 杭州 市 车 辆 管理 所 面向 广 大 机 动车 所 有 人 和 驾驶 
人 推出 的 创新 应 用 。 

(2 ) 商业 模式 

如 图 7/-10 所 示 ,“ 杭 州 掌上 车 管 ” 共 有 五 大 服务 内 容 导 办 指南 、 
在 线 办 理 、 自 主 预约 、 碍 询 提醒 、 学 习 教 育 。 提 供 这 些 服务 的 主要 目的 是 
使 用 户 办 理 各 种 与 机 动车 相关 的 业务 流程 变 得 时 加 方便 和 简单 。 例 如 ， 用 
户 可 以 直接 通过 该 应 用 至 询 机 动车 违法 记录 ， 并 通过 自助 功能 在 线 办 理 违 
法 昼 款 的 业务 ， 用 户 还 能 通过 应 用 中 的 地 图 三 找 距离 自己 最 近 的 驾校 、 服 
务 站 、 车 管 所 等 机 构 ， 查 看 这 些 机 构 的 服务 状态 ( 空 帮 、 停 办 )， 合 理 地 
规划 目 己 办 理 相 天 业务 的 时 间 。 





]/-10 杭州 掌上 车 管 应 用 商业 模式 


随 看 移动 互联 技术 和 用 户 需 求 的 不 断 发 展 ， 掌 上 车 管 的 业务 线 也 会 变 
得 揭 加 丰富 。 例 如 ， 当 用 户 的 机 动车 发 生 交 通 事故 时 ， 应 用 可 以 自动 定位 
用 户 及 车 辆 所 在 位 置 ， 方 便 抢险 救援 。 

以 LBS、020、SNS 为 形态 等 征 的 新 型 商业 模式 逐渐 显现 出 来 ， 如 用 户 
可 以 通过 应 用 寻找 口碑 最 佳 的 4S 店 ， 距 离 自 己 最 近 的 维修 站 、 洗 本店 、 
加 油 若 等。 应 用 可 以 通过 搜索 、 推 荐 、 广 告 等 获得 一 定 的 收益 。 


小 设计 大 思维 





移动 应 用 界面 的 设计 方法 与 实践 


(3 ) 设计 策略 

) 设计 触发 尽 。 

目前 ， 用 户 办 理 与 机 动车 相关 业务 ( 补 换 领 驾照 、 违 法 缴 款 、 年 检 

) 的 流程 和 手续 还 比较 烦琐。 由 于 咨询 、 填 表 到 排队 等 侯 、 缴 费 的 时 间 
We 
户 的 时 间 和 精力 ， 还 容易 使 用 户 产 生 人 负面 的 情绪 。 

2 设计 切入 高 % 

为 了 缓解 以 上 问题 ， 杭 州 和 车 管 所 决定 为 杭州 市 民 设 计 一 款 便民 服务 移 
ee 

) 设计 概念 o 

os 
为 用 户 提 供 在 线 查 询 、 学 习 、 办 理 等 多 项 服务 ， 使 用 户 能 更 加 快捷 、 
便利 地 获取 车 可 信息 、 办 理 车 管 业务 ， 力 图 为 用 户 打 造 “ 随 号 携 市 ” 
的 车 管 所 。 

产品 特色 : (由 将 线 上 与 线 下 的 资源 进行 了 合理 地 分 流 ， 使 整个 机 动车 
业务 体系 更加 有 序 ，@ 一 切 以 用 户 为 中 心 ， 从 导 办 、 在 线 办 理 、 预 约 、 告 
ea 便捷 、 更 具 效 率 的 服务 

) 设计 验证 。 
( Who ): 杭州 市 机 动车 车 主 。 
产品 ( What ). a 


环境 ( Where )， 适合 在 任何 移动 ( 走路 、 乘 车 、 等 符 ) 或 静止 的 环境 
( 和 家中、 办 公 室 ) 有 
时 间 ( When ): 适合 在 任何 时 间 使 用 。 


原因 ( Why ): ee 车 管 所 等 业务 办 理 机 构 办 二 

; 包 和 省 用 户 的 办 事 时 间 ; 外 能 从 学 习 、 咨 询 、 巴 约 、 办 理 业 务 等 各 个 
dy 为 用 户 提 供 便利 。 

方式 ( How ): 用 户 能 够 通过 乎 果 或 安 盾 应 用 商城 下 载 此 歌 应 用 ， 安 产 
后 便 能 正常 使 用 。 

价值 ( Value ): 该 应 用 能 提高 用 户 处 理 车 管 业务 的 效率 ， 减 小 线 下 车 
管 所 及 业务 处 理 点 的 办 事 压 力 ， 并 通过 良好 的 用 户 体 验 设 计 ， 让 用 户 在 使 
用 该 应 用 的 过 程 中 感到 满足 和 愉悦 。 
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( 4) 用 户 模 型 评 信 
设计 团队 通过 问卷 与 访谈 的 形式 ， 对 目标 用 户 群 的 特征 以 及 目标 用 


户 对 杭州 市 掌上 车 管 应 用 的 看 法 进行 了 调研 活动 ， 具 体 结论 如 下 : 也 希 
望 应 用 操作 界面 简单 ， 包 应 用 中 的 功能 不 必 太 多 ， 每 一 项 功能 的 入 口 明 
人 新 扑 消息、 政策、 新 闻 能 了 时 册 现在 应 用 闪 耐 中 


如 下 。 


em 


) 人 物 角 色 模 型 
ee 及 定 了 人 物 角 色 模 型 ， 具 体 结 论 
姓名 : 李强 
年 龄 : 35 
性 另 | : 而 
星座 .双子 


职业 : 科技 公司 员工 
爱好 : 看 电影 、 旅 行 、 游 泳 
性 格 : 双向 
了 式 惧 的 事物 : 贫穷 、 家 人 离开 
教育 育 景 : 人 锯 士 
家 诗 情 况 : 父 苹 、 事 和 子 
婚姻 情况 : 已 婚 
对 目前 车 管 业务 的 看 法 : 办 理 流 程 慢 ， 服 务 人 员 服 务 意识 甜 ， 人 太 多 
a 比较 支持 ， ea 1 Wlo 
) 界面 任务 模型 
ee 上 略 与 用 户 模 型 的 研究 成 果 ， 团 队 成 员 将 用 户 任务 分 解 为 以 
a 
Q) 结合 产品 商业 模式 与 设计 策略 的 需要 ， 应 用 要 上 时 括 与 机 动车 相关 


的 天 键 性 内 容 ， 示 绎 栏目 需要 以 醒目 的 形 陈 出 现在 界面 中 ， 如 最 新 的 动态 
资讯 、 法 律 法 规 、 机 动车 违法 情况 等 。 


出 ， 


小 设计 大 思维 


@ 主要 的 操作 入 口 被 归 类 到 主页 中 ， 而 主页 按钮 也 要 设计 得 更加 突 
以 万 便 用 户 随时 切换 到 主 界面 。 
(3) 每 一 项 功能 需 层级 分 明 ， 并 提供 用 户 修改 个 人 信息 的 入 口 。 





移动 应 用 界面 的 设计 方法 与 实践 


(7 ) 界面 信息 避 构 

擎 上 车 管 应 用 在 信息 架构 上 主要 分 为 5 个 模块 主页、 个 人 、 提 桓 、 
推荐 、 设 置 ， 如 图 /7-11 所 示 。 由 于 “主页 ”包含 了 应 用 中 绝 大 多 数 功 
能 ， 所 以 主页 及 用 浅 而 宽 的 信息 染 构 方式 ， 其 他 4 个 模块 则 采用 了 浅 而 
窄 的 方式 。 


CE 


> 





已 








3 3 时 
个 人 信息 查看 推荐 给 好 友 设置 软件 


7-11 掌上 车 管 信 息 洒 构 





主页 是 所 有 业务 办 理 、 查 询 的 入 口 ， 如 办 理 驾 照 /车 辆 业务 、 违 法 处 
理 、 导 办 、 预 约 、 学 习 、 信 息 查 询 、 查 看 网 点 地 图 等 。 当 用 户 有 需求 时 ， 
便 会 主动 进入 该 宅 面 寻找 自己 需要 的 服务 项 目 。 

其 中 ， 提 醒 用 来 告知 用 户 最 新 的 违法 情况 ， 推 荐 则 与 QQ、 微 信 等 即 
时 通讯 应 用 链接 。 将 这 两 项 功能 归 类 并 置 入 应 用 界面 最 下 方 的 标签 栏 是 为 
了 方便 用 户 随时 查看 个 人 的 违法 情况 ， 同 时 即时 与 好 友 互 动 ， 分 享 应 用 使 
用 的 体验 。 此 外 ， 个 人 与 设置 需要 满足 用 户 随时 伍 看 和 修改 的 需求 ， 因 此 
也 放置 在 标签 栏 之 中 。 

( 8) 界面 流程 图 分 析 

首次 进入 杭州 营 上 车 管 应 用 ， 用 户 需要 绑 定 个 人 的 机 动车 及 罗 驶 证 信 
妃 ， 硬 遇 到 罚单 处 理 则 需要 绑 定 银行 卡 ( 当然 也 可 以 在 首次 使 用 时 就 进行 
绑 定 )。 同 时 ， 要 新 建 一 个 账户 ， 设 置 用 户 名 和 和 密码， 以 完成 用 户 注册 。 

革 上 车 管 应 用 采用 渐进 陈 与 往复 陈 两 种 交互 形式 ， 层 级 之 间 联 系 荣 
密 。 流 程 中 相对 复杂 的 是 违法 处 理 、 车 辆 及 驾照 业务 ,特别 是 违法 处 理 ， 
奉 扯 到 多 种 违法 路 径 ( 见 图 7-12 )。 无 论 功 能 多 么 复杂 ， 设 计 团 队 部 要 在 
保证 用 户 操作 顺畅 的 前 提 下 进行 设计 ， 尽 力 将 流程 简化 ， 以 减少 用 户 的 所 
击 和 操作 次 数 。 
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各 和 亚 共 富 岂 
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册 牌照 种 类 违法 信息 由 运 a 
车 牌号 码 ] 返 | [违法 信息 2 是 违法 信息 (详细 ) 

Ea “ 主 注 4 二 六 
法 | mm | 违法 行为 
罕 | 采集 机 关 
泊 | 查询 上 人 刷新 | 


| 加码 证 ( 渤 择 基 一 ) 

驶 局 车 牌号 码 
] 韦 法 位 1 违法 乓 间 

法 违法 信息 (详细 ) 语法 地 

| {人 

询 返回 采集 机 关 


/-12 违法 处 理 部 分 流程 


( 9 ) 界面 导航 分 析 

1 ) 主 界面 导航 : 整套 界 血 采 用 标签 导航 作为 框架 ， 用 户 可 以 通过 界 
面 下 方 标签 栏 中 的 按钮 切换 五 大 功能 。 

2 ) 次 级 界面 导航 。 

主页 : 分 为 新 鲜 事 与 业务 两 个 模块 。 应 用 的 最 新 消息 、 法 规 以 及 
用 户 关 注 的 重要 内 容 部 会 放置 在 新 鲜 事 之 中 ， 因 此 新 鲜 事 比较 适合 米 用 标 
签 导 航 中 的 旋转 导航 ， 通 过 图 文 并 成 的 动态 形式 同 用 户 展 现 信息 。 

为 了 方便 用 户 直接 至 询 、 办 理 各 项 业务 ， 界 面 中 需要 提供 各 项 重要 业 
务 的 入 口 。 由 于 移动 设备 的 屏幕 空间 十 分 有 限 ， 因 此 业务 模块 采用 了 人 入口 
导航 中 的 九宫 格 导航 形式 ( 这 是 由 于 核心 业务 刚好 有 9 项 ， 后 期 还 可 以 拓 
展 )， 将 所 有 业务 有 序 地 放置 到 主页 界面 之 中 。 经 过 优先 级 排序 ， 用 户 关 
注 度 最 高 的 业务 会 放置 在 前 面 ， 如 驾照 业务 、 和 车辆 业务 、 违 法 处 理 。 

外 提醒 : 显示 最 新 的 公告 、 法 律 法 规 、 机 动车 违法 、 机 动车 检验 、 
驾驶 证 换 证 等 提醒 业务 。 界 射 及 用 列表 导航 ， 并 按照 时 间 顺 序 将 最 新 的 内 
容 放置 在 列表 的 最 上 面 一行 。 当 没有 任何 提醒 时 ， 界 面 中 便 不 会 出 现 列表 
导航 ， 仅 在 界面 中 央 显 示 “ 您 当前 没有 提醒 记录 ”的 文字 。 

G@) 推荐. 作为 推广 与 互动 性 质 的 界面 ， 所 推荐 的 内 容 需 要 设计 得 比 
较 简洁 和 清晰 。 因 此 ， 该 界面 从 形式 上 采用 了 列表 导航 的 梓 式 ， 使 用 户 能 
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通过 点 击 直接 链接 到 其 他 应 用 。 

由 人 个人、 设置 : 都 属于 功能 型 的 界面 ， 采 用 列表 导航 不 仅 能 清晰 地 
显示 文字 等 重要 信息 ， 还 能 方便 用 户 直接 得 看 、 编 辑 信息 。 

( 10 ) 界面 视觉 设计 

(D 主题 ， 界面 采取 简洁 、 冷 静 、 和 警示 的 视觉 主题 ， 以 展现 内 容 为 设 
计 原 则 进行 界面 整体 视觉 形象 设计 。 

@) 色彩 : 为 了 突出 设计 主题 ， 橙 色 、 蓝 色 与 灰色 为 界面 的 主要 颜 
色 。 监 色 与 检 色 是 互补 色 ， 检 色 代 表 和 警示 、 提 醒 ， 因 此 主要 应 用 于 图 标 
中 ， 而 瞧 色 则 主要 用 在 标签 栏 ， 是 一 种 行动 、 效 率 的 象征 ， 灰 色 作 为 界面 
的 背景 能 起 到 很 好 的 中 和 作用 ， 使 界面 看 起 来 更 加 协调 。 

(3) 图 标 : 设计 团队 运用 OK 手势 、 笑 脸 及 甲壳 虫 车 型 三 个 概念 图 形 诠 
释 了 杭州 车 管 应 用 是 一 个 方便 广大 车 主 处 理 车 管 各 项 业务 的 服务 平台 ， 如 
图 7-13 所 示 。 通 过 将 这 三 个 概念 图 形 进行 特征 提取 ， 再 经 过 创意 加 工 设 
计 出 了 杭州 车 党 应 用 的 图 标 。 





图 7-13 掌上 车 管 图 标 设计 


界面 中 其 他 图 标 设计 的 表现 也 偏重 简洁 与 实用 ， 计 用 户 一 看 便 知 其 合 
义 ， 并 懂得 如 何 操作 。 

(4) 导航 与 布局 : 掌上 车 管 视 竟 界面 整体 都 采用 了 居中 对 齐 的 形式 ， 
使 用 户 在 界面 中 的 操作 更 有 安全 感 ， 于 指 氮 击 的 准确 度 喝 高 。 在 个 人 、 提 
醒 、 推 荐 、 更 多 界面 的 列表 导航 中 ， 文 字 统 一 采用 左 对 齐 的 形式 ， 使 用 户 
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tt 
4 前 的 操作 状态 





的 视线 更 加 符合 
触发 与 非 触 发 的 状态 做 了 明显 的 区 分 ， 
( 见 图 7-14 ) 。 








性 别 ， 男 EE 
加 证 业务 车 辆 业务 二 法 处 理 
手机 号 
机 动车 信息 : > 
四 虽 
驾驶 证 信息 : > 仿生 查询 办 事 指 南 网 点 地 图 





~、 


i 检查 更 新 
器 推荐 应 用 
入 隐私 协议 
外 用 户 反馈 
@ 关 于 


退出 登录 








图 7-14 掌上 车 管 部 分 视觉 界面 


为 了 满足 不 同 手机 操作 平 侣 用户 群体 的 需求 ， 学 上 三 管 wv 
Android 两 种 操作 平谷 的 交互 与 视 和 规 汪 ， 设 计 了 两 僚 不 同 的 视 


As 天 
J 外。 
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@ 入 场 界面 : 车 管 应 用 入 场 界 面 通过 情境 化 的 卡通 形象 以 自问 自 答 
的 万 式 告 诉 用 户 该 应 用 能 够 帮助 他 们 解决 的 问题 ， 让 用 户 能 以 一 个 轻松 的 
状态 去 使 用 它 ， 如 图 7-15。 


还 在 为 您 的 爱 车 办 理 各 种 程序 而 还 在 为 您 的 驾驶 证 而 


烦恼 么 ? 东 奔 西 跑 吗 ? 





自己 的 事 开局 留 能 生活 





图 7-15 掌上 车 管 入 场 界 面 设计 
(6) 动 效 : 进入 车 管 应 用 的 违法 查询 功能 后 ， 可 以 实时 查询 违法 信 
息 ， 方便 用 户 查 询 及 处 理 违法 详情 。 该 页 和 面 通过 油 表 的 图 形 来 显示 当前 的 
驾驶 证 分 数 ， 当 用 户 点 击 查 询 按 钮 后 油 表 的 指针 会 迅速 摆动 指向 当前 分 
数 ， 如 图 7-16 所 示 。 
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您 有 待 处 理 违法 才 条 


新 XXX 义 义 义 未 处 理 六 


时 间 : 2012-10- 01 08:20 
地 点: 文 二 路 与 莫 干 山 山路 交叉 口 
违法 行为 : 机 动车 不 在 机 动车 道内 行驶 


-一 


7-16 掌上 车 管 应 用 违法 查询 的 动态 数据 可 视 化 


(3| 个 人 服 表 撕 配 助理 平台 


(1) 项 目 简介 
项 目 名 称 : Clothing Match Assistant 一 一 个 人 服装 搭配 助理 平台 





项 目 简介 : 本 项 目 为 作者 指导 的 学 生 获 奖 作 品 。 该 作品 获得 了 2014 年 
第 四 届 “ 天 营 怀 ”国际 工业 设计 创新 大 赛 导 能 产品 与 服务 设计 融合 创新 类 别 


铜 奖 的 殊 采 。 

随 着 智能 化 、 移 动 通信 和 网络、 云 计 算 的 发 展 与 普及 ， 生 活 中 的 事物 变 
得 里加 灵活 和 富有 弹性 ， 而 移动 的 概念 也 变 得 越 来 越 宽 演 。 提 到 移动 应 
用 ， 想 到 的 不 再 仅仅 是 次 载 在 于 机 等 移动 设备 中 的 软件 程序 ， 家 用 电 豆 、 
孙 有 具 、 办 公 环 境 的 移动 性 和 智能 化 的 趋势 已 经 逐渐 凸显 。 

该 项 目 是 针对 智能 家 居 这 一 热 护 问题 而 提出 的 市 有 前 瞻 性 研究 性 质 的 
设计 方案 。 为 未 来 衣 柚 做 出 了 大 胆 的 设想 ， 结 合 大 数据 、 云 计算 、 物 联网 
等 新 兴 技 术 ， 提 升 智能 家 居 的 用 户 体验 ， 为 用 户 市 来 个 性 化 、 智 能 化 的 生 


移动 应 用 界面 的 设计 方法 与 实践 
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( 2 ) 商业 模式 

该 项 目 集 智 能 换 闭 、 衣 物 信息 匹配 、 自 动 推荐 衣物 、 清 洁 提醒 等 功能 
为 一 体 ， 并 结合 智能 产品 的 内 部 结构 、 商 场 网 络 、 服 北 搭 配 推送 体系 设计 
形成 高 效 便捷 的 个 人 服 闭 搭 配 平 人 台 。 其 中 ， 服 北 搭 配 推 送 体系 中 包 售 的 即 
时 购买 等 功能 实现 了 ( 创造 、 推 销 和 交付 ) 这 一 价值 并 产生 可 持续 的 人 盈利 
收入 ， 最 终 演 变 为 完善 的 商业 模式 ， 从 而 形成 一 个 将 市 场 需求 与 资源 结合 
起 来 的 系统 。 

另外 ， 大 数据 理念 渗透 到 Clothing Match Assistant 的 每 一 个 领域 ， 
对 于 海量 用 户 数 据 进 行 深 度 挖 扎 和 分 析 ， 预 测 用 户 的 审美 喜好 、 穿 衣 风 格 
和 购物 习惯 。 

通过 对 云 计 算 的 使 用 ，Clothing Match _ Assistant 主要 为 天 气 、 日 
程 、 服 饰 欣 配 、 购 物 行 为 等 数据 提供 了 保管 、 访 问 的 场所 和 渠道 。 

最 后 ，Clothing Match Assistant 用户 端 在 互联 网 的 基础 上 上， 利用 
物 联 网 拉 术 实现 衣物 、 鞋 子 、 饰 品 等 物品 之 间 信 息 的 录入 和 交互 ( 见 
Pon yh er 

( 3 ) 设计 策略 

] ) 设计 触发 尽 。 

随 着 生活 水 平 的 显著 提高 ， 人 们 对 “ 穿 衣 ”的 需求 越 来 越 大 。 人 们 面 
对 不 同 的 场合 需要 搭配 不 同 的 服饰 。 当 生活 的 广 奏 越 来 越 快 ， 生 活 的 方式 
越 来 越 趋 向 于 智能 化 的 时 候 ， 传 统 衣柜 所 承载 的 “储存 ”功能 已 经 无 法 满 
足 用 户 多 元 化 的 需求 。 

2 RAN 

将 传统 衣柜 转换 成 智能 衣柜 ， 与 互联 网 及 多 种 智能 技术 相 结 合 ， 为 用 户 
搭建 一 个 服饰 搭配 、 整 理 、 购 物 等 综合 一 体 化 的 智能 生态 服饰 搭配 平谷 。 

及 贷 侵 s 

Clothing Match _ Assistant 主要 涵盖 了 四 大 功能 。 

(DD 服饰 搭配 ， 根据 天 气 、 行 程 安排 、 个 人 喜好 帮助 用 户 快 捷 地 搭配 
服饰 。 

@ 整理 : 帮助 用 户 整 理 衣柜 ， 上 自动 识别 换洗 后 的 衣物 ， 提 供 衣 物 除 
霉 提 醒 服 务 。 
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根据 天 气 状况 ”根据 行程 安排 ”记录 个 人 喜好 
进行 衣物 搭配 ” 进行 衣物 搭配 ”进行 衣物 搭配 
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7 一 17 Clothing Match Assistant 商业 模式 


@ 捐赠 ， 打 造 可 持续 智能 衣柜 ， 提 供 将 旧 衣 物 捐献 给 慈善 机 构 的 服务 。 

@ 购买 ， 根据 用 户 的 个 人 喜好 推荐 商品 ， 用 户 也 能 通过 衣柜 的 镜子 界面 
直接 购买 服饰 ， 与 线 下 商家 联合 ， 同 步 用 户 在 商场 试 穿 和 购买 的 信息 。 

4 ) 设计 验证 。 


用 户 (Who): 以 18~45 均 之 间 的 女性 用 户 为 主 。 

产品 ( What ): 个 人 智能 形象 顾问 ， 服 饰 搭 配 平 台 。 

环境 ( Where )， 适 合 在 家 中 使 用 。 

时 间 ( When ): 适合 在 需要 服 效 搭 配 、 衣 物 整 理 及 购买 的 时 候 使 用 。 


原因 ( Why ): 由 帮助 用 户 搭 配 服 饰 和 整理 衣物 ， 市 省 用 户 穿 衣 思 考 的 
时 间 ; @ 与 互联 网 结合 ， 加 强 用 户 与 衣柜 的 豆 动 。 

方式 ( How )， 用 户 购 买 智能 衣柜 后 录入 个 人 信息 ，3D 成 像 后 便 能 使 用 。 

价值 ( Value ): 通过 运用 大 数据 、 云 计算 、 物 联网 等 技术 ， 为 用 户 提 供 
了 一 个 畔 能 拘 配 、 整 理 服 饰 的 半 侣 ， 纺 合 居 能 除 考 、 捐 赠 、 购 买 等 服务 形成 
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一 个 可 持续 的 生态 系统 ， 并 通过 设计 提升 每 个 交互 万 点 的 用 户 体验 。 
(4) 用 户 模 型 评估 
Si 9 能 衣柜 的 期 行 ， 希望 衣柜 的 操作 简单 、 方 便 、 快 捷 。 
) 人 物 角 色 模 型 
eg 具体 结 
论 如 下 。 
姓名 : Hollie 
年 龄 : 25 
性 别 ， 女 
职业 ， 外 企 员 工 
所 在 城市 ， 上 海 
爱好 : 上 旅行、 写作、 得 街 
性 格 : 热情 开明 
恐惧 的 事物 : 身边 缺乏 信任 的 朋友 
教育 育 景 : 硕士 
家 庭 情 况 : 父母 
婚姻 情况 : 未婚 
对 现 有 衣柜 看 法 : 整理 衣物 麻烦 ， 寻 找 衣 物 不 太 便 捷 。 
对 智能 衣柜 的 看 法 : 感觉 很 有 必要 ， 对 智能 搭配 、 整 理 衣物 的 功能 很 
感 兴 趣 。 
( 6) 界面 任务 模型 
略 与 用 户 模型 的 研究 成 果 ， 团 队 成 员 将 用 户 任务 分 解 为 以 
生生 | 全 分 
Ds 界面 简洁 ， 重 点 功能 突出 。 
GO 避免 让 用 户 输入 ， 尽 量 采 用 自然 交互 的 方式 ， 如 采用 手势 交互 
体感 交互 等 。 
加 层级 太 深 ， 尽 量 采 用 局 平 化 的 视 竞 样式 。 
寞 加 信息 淋 构 
bn Match Assistant 界面 信息 架构 主要 分 为 三 , 饰 挫 
配 、 服 饰 整 理 与 服饰 购买 ， 如 图 7-18 所 示 。 服 饰 搭 配 本 是 最 重 
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要 的 两 项 功能 ， 系 统 不 仅 能 根据 用 户 个 人 的 偏好 、 天 气 、 场 景 、 时 间 、 地 
点 为 用 户 搭配 服饰 ， 还 能 在 整理 服饰 的 同时 为 用 户 提供 除 图 提醒 、 捐 赠 等 
服务 





7-18 Clothing Match Assistant 界面 信息 架构 


(8 ) 了 界 轴 流程 图 2 分 析 

设计 团队 在 Clothing Match Assistant 界面 流程 设计 上 比较 注重 考虑 
如 何 使 用 户 与 界面 的 交流 过 程 更 加 直接 和 自然 ， 因 此 各 界面 、 功 能 之 间 没 
有 太 过 复杂 的 交互 流程 ， 易 于 用 户 学 习 和 操作 。 图 7-19 所 示 是 服饰 搭配 
的 流程 图 ， 当 用 户 选 择 其 中 一 种 服饰 搭配 类 型 后 ， 便 可 以 选择 切换 形式 ， 
再 选中 自己 满意 的 服饰 。 





7 pp/ 返回 
服饰 搭配 








人 单 件 切换 


7-19 Clothing Match Assistant 服饰 搭配 流程 图 
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设计 团队 设想 衣柜 的 柜 门 就 是 一 面 镜 子 ， 而 这 向 镜子 也 是 人 与 衣柜 
互动 的 界面 。 因 此 ，fClothing Match Assistant 界面 的 交互 方式 主要 分 
为 两 种 类 型 : 体感 交互 与 近 距 离 交 互 。 体 感 交 互 : 便于 用 户 稍 远 距离 
观察 服饰 整体 搭配 的 效果 ， 有 用户 可 以 采用 体感 交互 切换 不 同 的 饰品 、 
衣服 、 裤 子 、 鞋 子 样 式 ， 以 进行 随时 观察 和 比较 ; 近 距 离 交 互 : 涉及 
需要 用 户 手动 点 击 、 选 择 的 功能 ， 例 如 除 址 、 删 除 、 捐 赠 、 优 移 、 整 
理 衣 但 等 @ 

(9) 界面 导航 与 视 涡 设计 

Clothing Match Assistant 界面 的 导航 与 视 吕 设计 都 采用 了 忆 平 化 的 
设计 风格 。 因 为 用 户 的 形象 、 用 户 所 处 的 环境 都 在 界面 中 心 ， 所 以 界面 中 
其 他 设计 元 素 都 应 围绕 用 户 所 在 的 中 心 区 域 而 展开 ， 视 觉 呈 现 应 相对 简 
洁 ， 避 人 免 对 用 户 形象 造成 较 大 干扰 。 

此 外 ， 为 了 与 镜子 的 界面 形成 区 分 ， 界 和 面 上 的 设计 图 标 及 文字 以 纯 
净 的 蓝 色 作为 主 色 调 、 权 色 作为 辅助 颜色 。 在 图 标 设计 上 ， 设 计 团 队 也 
将 无 交互 、 体 感 交 互 、 近 距离 氮 击 图 标 作 了 明显 区 分 ， 以 方便 用 户 操作 
( 见 图 7-20) 。 














区 ) 让 好 局 
无 交互 
、 体感 交互 


近 距 离 点 击 








7-20 Clothing Match Assistant 图 标 设计 
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后 i 记 


随 看 移动 智能 设备 的 飞速 发 展 ,，“ 屏 幕 ”不 再 是 传 圳 内容 和 信息 的 唯 
一 嫁 介 ， 人 与 物 、 物 与 物 、 人 与 环境 、 实 体 与 虚拟 之 间 的 沟通 成 本 赵 来 赵 
低 、 沟 通 方式 日 趋 多 样 化 ， 世 间 万 物 的 联通 会 变 得 越 来 越 自 然 与 流畅 。 正 
如 动 文山 利 ( Kevin Kelly ) 认为 下 一 个 时 代 是 氧气 的 时 代 。 他 预言 在 
不 久 的 将 来 ， 通 过 无 线 网 络 传输 的 信息 总 量 将 会 超过 通过 有 线 网 络 传输 的 
信息 总 量 。 未 来 ， 数 据 会 揭 多 地 在 每 个 人 的 智能 设备 之 间 传 输 ， 世 界 上 增 
长 最 快 的 不 是 物质 而 是 信息 数据 。 

基于 智能 设备 的 移动 应 用 虽然 已 经 在 全 球 沁 围 内 风靡 了 很 长 时 间 ， 但 
随 看 社会 、 科 技 、 人 文 的 不 断 发 展 ， 移 动 应 用 领域 仍然 有 很 多 未 知 的 镶 域 
等 看 我 们 去 探索 与 发 现 。 我 们 应 该 超越 时 间 、 空 间 、 设 备 以 及 其 他 现 有 元 
素 的 限制 ， 积 极 思 考 与 展望 未 来 信息 界面 的 面貌 与 内 容 。 

另外 ， 信 息 爆 炸 的 时 代 使 我 们 的 生活 与 工作 面临 压力 、 恕 惧 与 亚 
健康 等 问题 。 如 何 将 信息 以 更 加 人 性 化 的 方式 回应 用 户 ， 如 何 有 效 地 
为 用 户 组 织 和 提供 有 价值 的 信息 ， 如 何 帮 助 用 户 摆 甩 “低头 族 ” 的 现 
状 ， 如 何 将 用 户 引 导 到 更 加 健康 的 生活 模式 中 等 ， 都 是 设计 者 乃至 普 
通 六 人 欢 在 移动 互联 和 社会 化 网 络 主导 的 新 时 代 应 该 思 若 并 急需 解决 的 
问题 。 

作为 移动 互联 时 代 的 设计 者 面 对 上 述 问 题 ， 需 要 坚持 以 用 户 因素 为 核 
心 ， 用 设计 思维 和 数据 分 析 方 法 指导 并 服务 于 企业 ， 以 体验 设计 为 核心 ， 
与 用 户 共同 创造 新 的 玩具 人 文 关 怀 的 商业 模式 ， 为 用 户 市 来 更 多 好 用 、 健 
康 的 移动 应 用 。 

在 本 书 的 寿 备 过 程 中 ， 获 得 了 许多 好 友 的 帮助 ， 得 到 了 家 人 的 理解 与 
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